一 些 游戏 开始 时 的 Unity 跳 转 页 面 。2014 年 暴雪 发 布 


我 从 2015 年 开始 接触 Unity 开 发 ， 在 此 之 前 接触 过 很 多 游戏 ， 也 间或 见 
趣味 十 足 ， 也 深 深 地 吸引 了 包括 我 在 内 的 千 万 玩家 。 更 让 我 吃惊 的 是 ， 在 该 游 


卡 牌 游戏 《 炉 石 传说 》， 该 游戏 画 风 间 
戏 的 介绍 页 面 中 提 到 其 开发 平台 使 用 的 正 是 Unity3D。 自 此 之 后 我 便 开始 了 Unity 的 学 习 之 旅 。 

Unity 是 一 个 专业 的 游戏 引擎 ， 功 能 十 分 强大 。 但 是 对 于 没有 接触 过 任何 游戏 开发 或 者 没有 接触 过 代码 的 新 手 而 言 ， 要 学 会 
游戏 还 是 颇 有 难度 的 。 术 书 并 不 涉及 Unity 游 戏 开发 的 所 有 方面 ， 而 是 重点 关注 游戏 开发 中 颇 为 星 涩 难 懂 的 
要 有 各 种 各 样 的 着 色 器 及 
文 些 内 容 感 兴趣 ， 或 者 需要 实现 一 些 


从 头 到 尾 地 开发 一 个 
着 色 器 。 
器 是 游戏 表现 超 强 拟 实 效果 的 基石 。 和 大 千 世 界 中 各 种 各 样 的 材料 对 应 的 是 ， 游 戏 里 面 也 需 
。 如 果 读 者 恰好 对 这 
资料 和 文档 的 链接 ， 非 常 


是 游戏 
组 合 来 对 其 进行 模拟 。 比 如 透明 的 玻璃 效果 ， 棚 棚 如 生 的 动物 皮毛 效果 等 
类 似 的 需求 ， 那 么 本 书 应 该 很 适合 你 。 受 篇 幅 所 限 ， 有 一 些 不 是 本 书 主要 内 容 的 部 分 作者 也 提供 了 很 多 
有 助 于 你 对 某 些 领域 加 强 理解 和 认识 。 

就 翻译 本 身 而 言 ， 虽 然 我 们 会 尽力 细心 地 审查 和 校对 ， 但 仍 难 免 开 所 玖 忽 。 如 果 在 阅读 过 程 中 发 现 一 些 瑕 疯 或 者 有 争议 的 地 


， 以 免 对 大 家 造成 困扰 。 我 的 联系 方式 是 SonlyF5020@gmail.com。 
人 业余 时 间 来 完成 翻译 ， 在 此 对 我 爱 


方 ， 十 分 欢迎 读者 联系 译 者 进行 核对 和 改进 ， 以 免 天 
在 承接 本 书 翻译 之 时 ， 恰 逢 我 的 儿子 刚刚 出 生 。 当 时 除了 工作 的 忙碌 之 外 ， 还 得 花 一 部 分 
人 周 彩 萍 和 儿子 度 小 贤 道 一 声 感 谢 ， 是 你 们 一 直 以 来 的 理解 和 支持 才 让 本 书 得 以 完成 。 
占 红 来 
2017 年 3 月 北京 
月 j 所 
本 书 介绍 Unity 5 中 着 色 器 的 创建 和 后 期 特效 开发 。 你 可 以 从 零 开 始 学 习 创 建 最 基本 的 着 色 器 ， 掌 握 着 色 器 代码 是 如 何 组 织 
的 。 开 始 的 基础 知识 可 以 有 效 地 “武装 ”你 ， 让 你 在 后 续 如 体积 爆炸 、 毛 皮 着 色 等 章节 中 游 丸 有 余 。 本 版 是 专门 为 Unity 5 量 身 定 
制 的 ， 可 以 通过 使 用 一 些 基 于 物理 基础 的 演 娄 和 全 局 照明 来 让 你 的 场景 棚 棚 如 生 
在 每 一 章 的 结尾 ， 你 都 会 获得 一 些 新 的 技巧 ， 比 如 改善 着 色 器 质量 或 者 提升 着 色 器 代码 编写 效率 等 。 这 些 章节 都 是 量 身 定制 
宛 全 可 以 直接 跳 到 你 感 兴 趣 的 章节 来 专门 学 习 。 对 于 新 手 来 讲 ， 可 以 逐 章 阅读 来 构筑 


民 


的 ， 所 以 如 果 你 之 前 已 经 有 了 一 些 经 验 
学 到 制作 现代 游戏 视觉 的 技术 。 
些 着 色 器 ， 除 


个 知识 体系 。 不 管 使 用 何 种 方式 ， 你 都 会 
在 读 完 本 书 之 后 ， 你 手 上 会 有 一 堆 已 经 做 好 的 着 色 器 ， 可 以 在 你 的 Unity3D 游 戏 中 使 用 
创建 新 的 着 色 器 ， 如 何 完成 新 的 特效 以 及 性 能 优化 等 。 废 话 不 多 说 ， 让 我 们 开始 吧 ! 


本 书 主要 内 容 


此 之 外 你 会 理解 如 何 


第 1 章 ”会 将 你 引入 Unity 4 和 Unity 5 的 着 色 器 编码 世界 。 
第 2 章 “” 介绍 表 面 着 色 器 中 的 一 些 非 常常 用 的 技术 ， 包 括 如 何 给 你 的 模型 使 用 纹理 和 法 线 映射 。 


第 3 章 ”深度 解析 着 色 器 是 如 何 给 光照 行为 建 模 的 。 本 章 会 教 你 如 何 创 建 自 定义 光照 模型 来 模拟 一 些 特殊 效果 ， 比 如 卡通 着 


第 4 章 会 告诉 你 基于 物理 基础 的 泻 染 是 Unity 5 中 使 用 的 一 种 模拟 现实 的 基础 技术 ， 会 教 你 如 何 最 大 限度 地 使 用 好 基于 物理 
基础 的 泻 染 ， 如 何 使 用 透明 度 、 反 射 型 表面 和 全 局 照明 等 。 


第 5 章 ”会 教 你 如 何 使 用 着 色 器 来 修改 物体 的 几何 结构 。 木 章 会 引入 顶点 编辑 器 ,使 用 它 可 以 制作 体积 爆炸 、 雪 花 等 生动 的 
特 Cs 


第 6 草 解释 如 何 使 用 抓 取 功 能 来 制作 一 些 半 透明 材料 形成 的 变形 效果 。 

第 7 章 ”会 帮助 你 对 着 色 器 进行 一 些 优 化 ， 以 保证 游戏 在 各 种 不 同 设备 上 都 能 正常 运转 。 
第 8 草 ”展示 如 何 创建 特 效 和 其 他 一 些 除 了 Unity 几 乎 不 可 能 实现 的 视觉 效果 。 

第 9 章 ”会 告诉 你 如 何 通 过 后 期 特效 来 提升 游戏 的 可 玩 性 ， 比 如 夜 视 效 果 。 


第 10 章 ”介绍 本 书 中 的 很 多 高 级 技巧 ， 比 如 毛皮 着 色 和 热度 图 演 染 等 。 


阅读 前 的 准备 工作 


下 面 列 出 的 是 使 用 本 书 时 所 必需 和 可 选 的 一 些 软件 : 

. Unity 5 (必需 ) 

一 个 3D 应 用 程序 ， 比 如 Maya、Max 或 者 Blender (可 选 ) 

. 一 个 2DD 图 像 编辑 软件 ， 比 如 Photoshop 或 者 Gimp (可 选 ) 
本 书 的 读者 对 象 


如 果 你 想 用 Unity 5 来 创建 你 的 首 个 着 色 器 ， 或 者 想 通过 一 些 专业 的 后 期 特效 来 将 你 的 游戏 提升 到 一 个 新 的 高 度 ， 这 本 书 就 很 


适合 你 ， 但 是 可 能 需要 一 些 对 于 Unity 的 基础 理解 。 


本 书 结构 


在 本 书 中 ， 你 会 发 现 有 几 个 频繁 出 现 的 标题 〈 准 备 工 作 、 操 作 上 和 步骤、 工作 原理 、 更 多 内 容 、 参 考 ) ， 这 几 个 标题 一 般 是 这 样 
用 的 : 


这 个 部 分 告诉 你 预期 要 做 出 来 的 效果 是 什么 ， 需 要 准备 哪些 软件 和 预先 的 设置 。 


本 
> 
臣 
» 
Ey 
只 
一 


实现 的 具体 步骤 。 


工作 原理 


这 个 部 分 一 般 是 对 操作 步 又 的 详细 解释 。 


这 一 部 分 由 一 些 相关 的 附加 信息 组 成 ， 以 方便 读者 对 整体 内 容 有 更 全 面 的 认识 。 


这 一 部 分 会 提供 一 些 有 用 的 链接 和 其 他 有 用 信息 。 


Og 注意 以 这 种 方式 出 现 。 
Or 提示 和 技巧 以 这 种 方式 出 现 。 


下 载 示 例 代码 


本 书 提 供 相 关 的 一 些 示 例 代 码 文 件 下 载 ， 可 以 访问 http://www.packtpub.com/support 来 注册 ， 相 关 文 件 会 用 电子 邮件 直接 发 


下 载 代码 文件 的 步骤 如 下 : 

1. 通 过 电子 邮件 和 窗 码 在 上 述 网 站 上 登录 或 者 注册 。 
2. 移 动 鼠 标 到 网 站 顶部 的 SUPPORT 标 签 处 。 

3. 点 击 Code Downloads&Errata。 

4. 输 入 书 名 ， 点 击 Seatch 按 钮 。 

5. 选 择 你 在 查找 的 书籍 ， 下 载 相关 代码 文件 。 

6. 从 下 拉 菜 单 中 选择 你 的 购买 渠道 。 

7. 点 击 Code Download。 

文件 下 载 之 后 ， 请 使 用 如 下 解压 软件 进行 解压 : 


Windows 系 统 请 使 用 WinRAR/7-Zip，Mac 系 统 请 使 用 Zippeg/iZip/unRarX，Linux 系 统 请 使 用 7-Zip/PeaZip。 


下 载 本 书 的 彩 图 


我 们 还 提供 本 书 中 所 用 到 的 蕉 图 、 图 片 的 彩 图 PDF 文件 ， 这 些 彩 图 可 以 让 你 更 好 地 理解 输出 的 细微 差别 。 你 可 以 
从 https://www.packtpub.com/sites/default/files/downloads/UnitySxShaders AndEffectsCookbook_SecondEdition_Gtraphics.pdf 处 下 载 。 


第 1 章 ”创建 你 的 第 一 个 看 色 器 


本 草 会 讨论 一 些 游戏 开发 着 色 流程 中 广泛 使 用 的 漫 反 射 技术 。 人 在 这 一 草 中 ， 你 会 学 到 如 下 内 容 : 
创建 基本 的 标准 着 色 器 

. 从 Unity 4 向 Unity 5 迁移 

: 给 着 色 器 添加 属性 


“ 在 表面 着 色 器 中 使 用 属性 


首先 让 我 们 想象 一 个 均匀 涂 日 的 立 万 体 。 这 个 立 万 体 的 各 个 面 上 的 头 色 都 是 一 样 的 ， 但 是 随 着 光照 方向 的 不 同 ， 以 及 观察 者 
视角 的 不 同 ， 各 个 面 上 呈现 出 来 的 影像 都 是 不 同 的 。 在 3D 图 像 技 术 中 ， 这 种 级 别 的 拟 实效 果 是 通过 着 色 器 完成 的 。 着 色 器 是 一 
种 特殊 的 程序 ， 主 要 用 来 模拟 光照 效果 。 一 个 木质 立 万 体 和 一 个 金属 立方 体 可 以 共用 一 个 同样 的 3D 模 型 ， 然 后 使 用 着 色 器 残 可 
以 让 它们 看 起 来 大 不 相同 。 这 一 草 会 循序 新 进 地 介绍 Unity 中 的 着 色 器 代码 。 如 果 你 之 前 没有 怎么 接触 过 着 色 器 ， 经 过 这 一 章 你 
就 会 理解 着 色 器 是 什么 、 它 们 是 如 何 工作 的 以 及 怎么 对 着 色 器 进行 自 定 义 了 。 


在 本 章 的 结尾 ， 你 应 该 已 经 知道 了 如 何 创建 一 个 有 些 基本 功能 的 基础 着 色 器 。 有 了 这 些 知 识 之 后 ， 你 束 基 本 上 能 随心 所 欲 地 
创建 表面 着 色 器 了 。 


1.2 ”创建 基本 的 标准 看 色 器 


每 一 个 Unity 开 发 人 员 都 应 该 熟 悉 模 块 (component) 的 概念 。 游 戏 中 的 所 有 物体 都 会 包含 一 系列 模块 ， 这 些 模 块 会 影响 它 
的 外 观 和 行为 。 一 般 而 言 脚本 (script) 会 决定 物体 的 行为 ， 而 泻 染 器 (renderer) 则 决定 了 它 在 屏幕 上 呈现 出 来 的 外 观 。 
Unity 有 多 种 泻 染 器 ， 根 据 我 们 想 要 显示 的 物体 类 型 的 不 同 ， 会 使 用 不 同 的 泻 染 器 。 每 个 3D 模 型 一 般 都 会 有 一 个 名 为 
MeshRenderer 的 泻 染 器 。 一 个 物体 可 以 只 有 一 个 泻 染 器 ， 但 是 一 个 泻 染 器 可 以 有 多 种 材质 (material) 。 每 一 种 材质 束 是 一 个 
着 色 器 呈现 出 来 的 外 观 ， 因 此 着 色 器 也 就是 3D 图 像 食物 链 的 最 后 一 环 。 这 些 模 块 之 间 的 天 系 可 以 从 下 图 看 出 : 


网 格 这 吏 谷 网 格 过 沽 谷 


游戏 对 象 









































理解 了 这 些 模块 乙 间 的 不 同 十 分 有 助 于 我 们 理解 着 色 器 是 如 何 工作 的 。 
1.2.1 ”准备 工作 


在 准备 学 习 这 一 部 分 时 ， 你 需要 运行 Unity 5 并 且 创 建 一 个 新 的 项 目 (project) 。 在 本 书 配套 的 代码 里 面 也 包含 这 样 一 个 初 


始 化 好 的 Unity 项 目 ， 你 可 以 使 用 这 个 项 目 作为 基础 ， 随 着 后 续 章 节 的 深入 学 习 来 目 定 义 你 的 着 色 器 。 准 备 好 这 两 样 东西 之 后 ， 
实时 着 色 的 精彩 世界 已 经 为 你 小 开 了 。 


1.2.2 操作 步骤 


在 开始 做 着 色 器 之 前 ， 可 以 先 创建 一 个 小 的 场景 作为 基础 。 创 建 场 景 的 步骤 是 在 Unity 编 辑 器 中 选择 GameObject|Create 
Empty。 在 这 个 场景 中 ， 可 以 创建 一 个 简单 的 地 平面 ， 再 添加 几 个 球体 来 供 我 们 的 着 色 器 使 用 ， 再 添加 一 个 平行 光 来 照 


之 这 个 场 


景 。 创 建 好 场景 之 后 ， 可 以 按照 如 下 步骤 编写 着 色 器 : 


1. 在 Project 标 签 页 中 ， 右 键 单 击 Assets 文 件 夹 ， 然 后 选择 Create|Folder。 


Os 如 果 你 使 用 的 是 本 书 配 套 的 项 目 ， 可 以 直接 跳 到 第 4 步 。 


2. 将 你 创建 的 文件 夹 重 命名 为 Shaders。 重 命名 万 式 是 右键 单 击 文件 来 ， 然 后 从 弹出 的 菜单 中 选择 Rename。 或 者 选中 文件 
夹 后 按 快捷 键 F2 (这 也 是 Windows 系 统 下 默认 的 重 命名 快捷 键 ) 。 


3. 创 建 另 外 一 个 名 为 Materials 的 文件 夹 。 
4. 右 键 单 击 Shaders 文 件 夹 ， 选 择 Create|shader。 然 后 右键 单 击 Materials 文 件 夹 ， 选 择 Create|Material。 
5. 将 新 创建 的 着 色 器 和 材质 都 重 命名 为 standardDiffuse。 


6. 任 MonoDevelop (Unity 默 认 的 脚本 编辑 器 ) 中 双击 打开 standardDiffuse 着 色 器 。Unity 会 目 动 打开 该 编辑 器 并 且 显 示 
对 应 的 着 色 器 代码 。 


理 。 你 可 以 在 这 些 基 础 代码 的 基础 上 ， 快 速 自 定义 自己 的 着 色 器 。 


7. 现 在 我 们 需要 声明 着 色 器 所 在 的 自 定 义 位 置 。 着 色 器 中 的 第 一 行 代 码 就 是 我 们 指定 给 着 色 器 的 自 定义 路 径 ， 只 有 这 样 
Unity 才 会 知道 这 里 有 一 个 着 色 器 ， 在 给 材质 指定 着 色 器 的 时 候 ， 该 着 色 器 才 会 出 现在 下 拉 菜 单 中 。 我 们 已 经 将 路 径 重 命 
为 “CookbookShaders/StandardDiffuse”， 但 是 你 完全 可 以 按照 自己 的 喜好 给 它 换个 名 字 。 现 在 不用 担心 它 有 任何 依赖 。 在 
MonoDevelop 中 保存 着 色 器 ， 然 后 返回 Unity 编 辑 器 。Unity 在 识别 到 着 色 器 文件 发 生 改 动 时 ， 会 自动 编译 着 色 器 相关 代码 。 确 
保 你 的 春色 器 代码 是 这 样 的 : 


Shader "CookbookShaders/StandardDiffuse" { 
Properties { 


.Color ("olor Color}) = (lil5l; 41) 
MainTex ("Albedo (RGB)", 2D) = "white" {} 
Glossiness ("Smoothness", Range(0,1)) [本 


Metalliec ("Metallie™, Range {0,1)} = 0.0 


| 


SubSshader 1{ 
Tags { "RenderType"="Opaque" |} 
LOD 200 


CGPROGRAM 

// Physically based Standard lighting model, and enable 
shadows on all light types 

#pragma surface surf Standard fullforwardshadows 


// Use shader model 3.0 target, to get nicer looking 
lighting 
#pragma target 3.0 


sampler2D MainTex; 


struct Input { 
float2 uv MainTex; 


}; 


half Glossiness; 
half Metallic; 
fixed4 Color; 


void surf (Input IN, inout SurfaceOutputstandard o) { 
// Albedo comes from a texture tinted by color 
fixed4 C = tex2D ( MainTex,; IN.uv MainTex) * Color:; 
O.Albedo = Cc.rgb; 
// Metallic and smoothness come from slider variables 
oOo.Metallic = Metallic; 
oO.Smoothness = Glossiness; 
oO.Alpha = Cc.a 


} 


ENDCG 


} 


FallBack "Diffuse" 


} 


8. 技 术 上 来 讲 ， 这 是 一 个 基于 物理 基础 泻 染 (physically-based rendering) 的 表面 着 色 器 。 在 Unity 5 中 已 经 将 物理 基础 泻 
染 作为 标准 。 顾 名 思 义 ， 这 种 着 色 器 会 通过 模拟 光照 到 物体 上 来 获得 真实 感 。 如 果 你 使 用 的 是 之 前 版 本 的 Unity (比如 Unity 
4) ， 代 码 会 大 不 相同 。 在 引入 物理 基础 泻 染 之 前 ，Unity 4 并 没有 多 少 精细 技术 。 关 于 不 同类 型 着 色 器 的 介绍 会 在 本 书后 面 章节 
中 详细 展开 。 


9. 在 创建 好 着 色 器 之 后 ， 我 们 需要 将 其 天 联 到 一 种 材质 上 。 选 择 第 4 步 中 创建 的 名 为 standardDiffuse 的 材质 ， 从 Shader 下 
拉 菜 单 中 查看 Inspector 标 签 页 ， 选 择 CookbookShaders|StandardDiffuse (如 果 你 使 用 的 路 径 与 本 书 不 同 的 话 ， 看 到 的 着 色 
器 路 径 也 会 有 所 不 同 ) 。 这 个 操作 就 会 将 之 前 的 着 色 器 指定 给 该 材质 ， 接 下 来 你 就 可 以 将 这 个 材质 指定 给 某 个 物体 了 。 


Os 将 材质 指定 给 物体 的 步骤 是 : 从 Project 标 签 页 中 将 材质 抱 统 到 场景 中 的 物体 上 。 或 者 将 材质 抱 彼 到 物体 的 


Inspector 标 签 页 中 也 可 以 。 


做 完 上 述 步骤 乙 后 的 例子 应 该 看 起 来 和 下 面 差 不 多 : 





现在 还 没什么 好 看 的 ， 但 是 我 们 的 着 色 器 开 友 环境 已 经 准备 好 了 ， 可 以 按照 需要 来 修改 着 色 器 了 。 


Unity 有 一 些 帮 助 你 准备 着 色 器 环境 的 指令 ， 让 你 事半功倍 。 只 需要 简单 地 单 击 几 下 丈 已 经 准备 好 了 。 其 实在 表面 着 色 器 的 
背后 ， 有 很 多 元 素 在 协同 工作 。Unity 使 用 的 是 Cg 着 色 器 语言 ， 但 是 针对 该 语言 做 了 很 多 优化 和 提升 ， 以 帮助 你 高 效 地 编写 着 色 
器 代码 。 表 面 着 色 器 语言 更 多 的 是 一 种 基于 组 件 的 编码 方式 。 诸 如 处 理 纹理 坐标 和 转换 矩阵 的 事情 ，Unity 都 已 经 为 你 做 好 了 ， 
所 以 你 不 用 完 完 全 全 从 头 开 始 。 放 在 以 前 ,我 们 在 创建 着色 器 的 时 候 要 反 反 复 复 地 编写 大 量 重复 代码 。 随 着 对 表面 着 色 器 的 了 解 
逐步 深入 ， 你 目 然 会 对 Unity 如 何 使 用 这 些 Cg 语 言 相 关 的 底层 遂 数 来 完成 底层 图 像 处 理 器 (GPU) 任务 感 兴趣 的 。 


Os Unity 中 所 有 文件 都 是 从 它们 所 在 的 文件 夹 中 独立 引用 的 。 我 们 可 以 在 Unity 编 辑 器 中 移动 着 色 器 和 材质 文件 的 位 
置 ， 它 们 之 间 的 链接 是 不 会 被 破坏 的 。 但 是 不 能 把 文件 移出 Unity 编 辑 器 ， 一 旦 移出 了 Unity 就 没 办 法 跟踪 到 这 些 文件 及 其 引用 的 
更 新 了 。 


在 简单 地 修改 了 一 下 着 色 器 路 径 名 之 后 ， 我 们 已 经 得 到了 一 个 可 以 在 Unity 环 境 中 正常 工作 的 基础 漫 反 射 着 色 嚣 了。 我 们 只 
改 了 一 行 代码 ， 所 有 的 光照 和 阴影 都 已 经 做 好 了 。 


Unity 5 中 内 建 着 色 器 的 源 代 码 是 隐藏 的 ， 你 不 能 从 编辑 器 中 像 打 开 目 己 的 着 色 器 那样 打开 这 些 内 建 着 色 器 。 


如 果 你 想 知道 在 哪里 可 以 找到 Unity 中 大 量 的 内 建 Cg 函 数 ， 可 以 到 Unity 的 安装 目录 ， 然 后 进入 
Unity45\Editor\Data\CGIncludes。 人 在 这 个 目录 下 ， 可 以 找到 这 些 Unity 中 用 到 的 着 色 器 源码 。 这 些 源码 本 身 也 是 随 着 时 间 变 化 
的 ， 如 果 你 想 找 其 他 版 本 的 着 色 器 代码 ， 可 以 去 UNITY DOWNLOAD ARCHIVE (https://unity3d.com/get- 
unity/download/archive) 查找 ,方法 是 选中 正确 的 版 本 之 后 ， 从 下 拉 菜 单 中 选择 Build in shaders， 如 下 图 所 示 。 这 里 应 该 有 
三 个 文件 : UnityCG.cginc、Lighting.cginc 和 UnityShaderVariables.cginc。 当 前 这 个 着 色 器 会 用 到 所 有 三 个 文件 。 


UNITY DOWNLOAD ARCHIVE 


From this page You can download the Previous versions of Unity for both Unity Personal and Professional Editions (lif you have a Pro 
license, enter in your key when promprted after installation}. Please mote that there ls no backwards compatibility from Unity 5; projects 
made in 5.x will not open in 4.x. HCWewer Unity 5.x will iMmport and corvert 4.x projects. We advise you to back up your project before 
converting and check the console log for any errors or warnings after Importing. 
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在 第 10 章 中 ， 我 们 会 深入 探讨 如 何 使 用 这 些 Cglnclude 来 将 着 色 器 代码 模块 化 。 


1.3 从 Unity 4 向 Unity 5 迁移 


不 可 人 否认， 电子 游戏 中 的 图 像 技术 在 过 去 的 10 年 中 友 生 了 翻天 履 地 的 变化 。 每 一 个 包含 前 沿 扩 术 的 新 游戏 的 面世 ， 市 给 我 
们 的 都 是 无 与 伦比 的 实时 超 现 实体 验 。 同 样 ， 在 Unity 中 着 色 器 及 其 相关 技术 也 是 日 新 月 异 ， 这 种 不 断 的 更 新 换代 很 多 时 候 也 是 
大 家 产生 迷惑 的 根源 之 一 。 在 Unity 5 之 前 ， 主 要 有 两 种 着 色 器 被 及 用 : 漫 有 反射 和 高 光 着 色 器 。 顾 名 思 义 ， 这 两 种 着 色 器 分 别 用 
在 无 光 和 高 光 材 料 上 。 如 果 你 已 经 用 了 Unity 5， 可 以 跳 过 这 一 部 分 ， 这 部 分 内 容 主 要 解释 如 何 使 用 Unity 5 重 现 这 些 之 前 的 特 
效 。 


1.3.1 ”准备 工作 


开始 这 一 部 分 之 前 ， 我 们 需要 准备 一 个 Unity 4 的 环境 。 在 Unity 4 中 同样 有 一 些 预先 提供 好 的 内 建 着 色 器 。 如 果 你 是 开始 开 
发 一 个 新 游戏 ， 毫 无 疑问 你 会 使 用 最 新 版 本 的 Unity， 但 是 如 果 是 个 遗留 项 目 ， 很 有 可 能 之 前 使 用 的 就 是 一 些 低 版 本 的 Unity。 在 
做 版 本 迁移 的 时 候 一 定 要 格外 小 心 。 在 Unity 引 掌中 ， 很 多 东西 都 友 生 了 变化 。 而 且 丈 算是 某 些 内 建 着 色 器 能 正常 工作 ， 脚 本 也 
可 能 变 了 。 如 果 你 准备 迁移 整个 工作 空间 ， 首 要 的 是 要 做 好 备份 。 很 重要 的 一 点 是 : 要 记 住 仅 仪 保存 资源 和 场景 文件 是 远 远 不 够 


的 ，Unity 中 大 量 的 配置 文件 保存 在 其 元 数据 中 。 做 迁移 备份 时 最 安全 的 方式 是 将 包含 项 目的 整个 文件 夹 拷贝 一 份 。 最 好 的 方式 
是 从 资源 管理 器 (Windows) 或 者 Finder (Mac) 中 将 整个 文件 夹 物理 拷贝 一 份 。 


1.3.2 操作 步骤 


如 果 你 想 将 之 前 做 好 的 着 色 器 迁移 到 Unity 5， 有 两 种 方式 : 自动 升级 项 目 或 统一 切换 到 标准 着 色 器 。 
目 动 升级 


这 是 最 简单 的 一 种 办 法 。Unity 可 以 导入 之 前 版 本 的 项 目 并 对 其 进行 升级 。 你 会 友 现 ， 升 级 转换 完 之 后 ， 束 不 能 用 Unity 4 
了 ， 哪 怕 你 的 资源 文件 一 个 都 没有 改动 。 原 因 是 Unity 的 元 数据 已 经 做 过 转换 了 。 自 动 升 级 的 步 又 是 打开 Unity 5， 单 击 OPEN 
OTHER 来 选择 老 版 本 项 目 所 在 的 文件 夹 。Unity 会 询问 你 是 否 需 要 进行 转换 。 单 击 Upgrade 按 钮 开始 转换 。Unity 会 重新 导入 你 
的 所 有 资源 文件 ， 重 新 编译 脚本 。 如 果 你 的 项 目 很 大 的 话 ， 这 个 过 程 可 能 持续 数 小 时 。 转 换 完成 之 后 ， 你 融会 友 现 一 些 改 变 。 例 
如 材质 的 Inspector 栏 中 可 能 会 从 Bumped Diffuse 变 成 了 Legacy Shader/Bumped Diffuse。 


Oi n 使 Unity 4 中 的 诸如 漫 反射 、 镜 面 反射 等 着 色 器 都 已 经 废弃 了 ，Untiy 5 还 是 保持 了 良好 的 向 下 兼容 性 。 你 可 以 在 
材质 的 下 拉 菜 单 中 的 Legacy Shaders 目 录 下 找到 这 些 遗 留 着 色 器 。 


使 用 标准 着 色 器 
如 果 不 想 继续 使 用 遗留 的 着 色 器 ， 可 以 使 用 Unity 5 中 新 的 标准 着 色 器 来 取而代之 。 在 蔡 换 之 前 ， 需 要 记 住 一 点 : 这 两 者 是 


基于 不 同 的 光照 模型 来 构建 的 ， 因 此 肯定 会 影响 材质 本 身 的 外 观 。Unity 4 中 有 超过 80 种 不 同 的 内 建 看 色 器 ， 辟 共 分 为 6 个 大 类 

(普通 、 表 明 、 透 明 剪 切 、 目 照明 和 反射 类 等 ) 。 在 Unity 5 中 ， 全 都 被 标准 着 色 器 取代 。 不 幸 的 是 ， 并 没有 什么 魔法 可 以 将 你 
的 着 色 器 直接 转换 成 标准 着 色 器 ， 但 是 你 可 以 通过 下 面 这 个 表格 来 理解 如 何 配 置 Unity ?中 的 标准 看 色 器 来 模拟 Unity 4 中 那些 遗 
留 的 着 色 器 : 


春色 从 Unity 4 (遗留 ) Unity 5 
标准 春色 人 般 
漫 反 射 着 色 器 漫 反 射 朗 伯 遗留 着 色 器 / 漫 反 射 朗 伯 基于 物理 基础 的 泻 染 : 
金属 工作 流 
慰 准 着 色 需 (高 光 设 置 ) 
基于 物理 基础 的 演 染 : 
高 光 工 作 流 
慰 准 着 色 人 需 
演 染 模式 : 透明 
标准 看 色 癌 
演 染 模式 剪 切 





入 /高 光 Blinn- 


高 光 着 色 器 


5 器 / 透明 剪 切 顶点 





可 以 使 用 Inspector 中 的 Shader 下 拉 菜 单 来 让 老 的 材质 使 用 这 些 着 色 器 ， 只 需要 选择 合适 的 标准 着 色 器 即 可 。 如 果 你 的 老 着 
色 器 使 用 了 纹理 、 颜 色 和 法 线 映 射 ， 这 些 属性 会 自动 应 用 在 新 的 标准 着 色 器 中 。 你 可 能 还 是 需要 配置 一 些 标准 着 色 器 的 参数 来 让 
它 跟 之 前 的 光照 模型 保持 一 致 。 下 图 展示 的 是 一 个 斯 坦 福 免 子 在 旧 的 漫 反 射 着 色 器 ( 右 图 ) 、 转 换 成 标准 着 色 器 ( 左 图 ) 和 光滑 
度 (Smoothness) 调 为 0 的 标准 着 色 器 (中 图 ) 中 的 显示 效果 : 





迁移 目 定 义 寿 色 器 


如 果 你 在 Unity 4 中 写 过 自 定义 着 色 器 ， 大 部 分 情况 下 在 Unity 5 中 可 以 直接 使 用 这 些 代码 。 除 此 之 外 ，Unity 5 中 对 着 色 器 


的 工作 方式 做 了 些微 调 ， 因 此 可 能 会 引起 一 些 错 误 或 者 矛 慎 。 最 重要 的 一 点 修改 是 光 的 亮度 。Unity 5 中 的 光亮 度 是 Unity 4 中 的 
两 舍 。 所 有 老 的 寿 色 器 在 重 写 的 时 候 都 考虑 到 了 这 一 点。 如 果 你 升级 一 些 内 建 看 色 器 ， 或 者 切换 到 标准 着 色 器 ， 不 会 友 现 任何 问 
题 。 但 是 如 果 你 重 写 过 上 自己 的 光照 模型 ， 需 要 注意 新 环境 下 光亮 度 不 骨 需 要 来 以 2 倍 了 。 下 面 这 段 代 码 可 以 确保 这 一 点 : 

// Unity 4 

Gr9gB = BAlbBedo: * LightCOl0r0.rgB * (diff * atten * 2); 

-/ Unity 5 


.rgb = S.Albedo * LightColor0.rgb * (diff * atten); 
如 果 你 没 写 过 着 色 器 也 不 用 害怕 。 光 照 模 型 相关 内 容 会 在 第 3 草 中 详细 解释 。 


Oa 相 比 于 Unity 4，Unity 5 在 着 色 器 的 处 理 方式 上 还 有 一 些 其 他 方面 的 改动 。 你 可 以 
在 http://docs.unity3d.com/Manual/Upgrade Guide5-Shadets.html 的 Shadets in Unity 5.0 中 找到 更 详细 的 改动 说 明 。 


1.3.3 ”工作 原理 


制作 者 色 器 始终 要 考虑 性 价 比 。 拟 实效 果 好 的 着 色 器 需要 占用 大 量 的 计算 资源 ， 人 在 某 些 设备 上 可 能 会 引起 延 时 。 一 般 而 言 特 
效 最 好 应 用 在 一 些 非 常 重要 、 缺 之 不 可 的 地 方 。 如 果 某 种 材质 并 不 需要 高 光 有 反射， 那么 束 没 有 必要 专门 用 一 个 着 色 器 来 计算 高 光 
效果 。 这 也 是 Unity 4 中 引入 了 如 此 多 不 同 的 着 色 器 的 原因 之 一 。Unity 5 中 的 标准 着 色 器 理论 上 可 以 蔡 代 之 前 的 所 有 着 色 器 ， 
为 标准 着 色 器 集合 了 法 线 映 射 、 透 明和 反射 功能 。 但 是 在 Unity 5 中 进行 了 某 些 合理 的 优化 ， 以 确保 只 计算 那些 真正 必需 的 特 
效 。 如 果 你 的 标准 材质 并 没有 反射 效果 ， 那 么 Unity 5 是 不 会 计算 这 一 部 分 的 。 


除 此 之 外 ， 标 准 寿 色 器 主要 是 为 拟 实 材质 而 设计 的 。 相 对 而 言 ， 老 的 漫 反 射 和 局 光 着 色 器 并 不 是 为 拟 实 材质 而 设计 的 。 这 也 
是 从 老 的 着 色 器 迁移 到 标准 着 色 器 时 ， 需 要 对 物体 的 泻 染 万 式 做 一 些 修改 的 原因 之 一 。 


1.3.4 参考 


.第 3 章 深入 讲解 了 漫 反射 着 色 器 和 高 光 着 色 器 是 如 何 工作 的 。 即 使 在 Unity 5 中 这 些 着 色 器 已 经 废弃 了 ， 理 解 它们 的 原理 对 
于 你 设计 新 的 光照 模型 也 是 大 有 神 益 的 。 


: 第 4 章 将 会 向 你 展示 如 何 释放 Unity 5 中 的 标准 着 色 器 的 更 多 潜力 。 


1.5 ”在 表面 看 色 器 中 使 用 属性 


我 们 已 经 创建 了 一 些 属性 ,现在 在 着 色 器 中 开始 试 着 把 这 些 属 性 用 起 来 ， 通 过 这 些 属性 让 材质 的 微调 过 程 更 加 高 效 。 


可 以 通过 材质 的 Inspector 标 签 页 得 到 这 些 属性 的 值 ， 因 为 我 们 给 属性 绑 定 了 一 个 变量 名 。 但 是 在 通过 变量 名 访问 属性 值 之 
前 ， 要 先 准 备 一 些 东 西 。 


1.5.1 “操作 步骤 


下 面 是 在 表面 看 色 器 中 使 用 属性 的 步骤 : 


1. 因 为 我 们 在 1.2 节 中 已 经 删除 了 _MainTex， 所 以 开始 之 前 ， 先 移 除 下 面 几 行 代码 : 


_MainTex ("Albedo (RGB)", 2D) = "white" {} 
sampler2D MainTex,; 
fixed4 cc = tex2D ( MainTex, IN.uv MainTex) * Color:; 


2. 接 下 来 ， 在 着 色 器 中 的 CGPROGRAM 行 之 下 添加 如 下 代码 : 


float4 AmbientColor; 
float MySliderValue; 


3. 第 2 步 元 成 之 后 ， 可 以 在 着 色 器 中 使 用 属性 的 值 了 。 我 们 先 将 _Color 属 性 和 _AmbientColor 属 性 的 值 相 加 之 后 ， 赋 给 
o.Albedo， 所 以 在 surf () 六 数 中 添加 下 面 的 代码 : 


void surf (Input IN, inout SurfaceOutputStandard o) |{ 
fixed4 & = pow(( COlor + AmbiéentColor), 

MySliderValue); 

Albedo SS Grqb; 

Metallac = Metallics 


.Smoothness = Glossijiness; 


人 光臣 翅 


Ld EE a 


4 最终 的 着 色 器 代码 应 该 看 起 来 像 下 面 这 样 。 如 果 你 在 MonoDevelop 中 保存 代码 然后 在 Unity 中 打开 ， 着 色 器 会 被 自动 编 
译 。 如 果 没有 错误 的 话 ， 可 以 修改 材质 的 环绕 色 和 发 光 色 了 ， 也 可 以 通过 滑 块 来 增加 最 终 颜色 的 饱和 度 等 值 。 就 是 这 么 智能 ! 


Shader "CookbookShaders/StandardDiffuse3" { 
// We define Properties in the properties block 
Properties { 


. or (OoLoE®, Qo) = (11 
AmbientColor("Ambient Color", Color) = (1,1,1,1) 
. MyS1iderValue("This ls a Slider", Range(0,30)) = 2.5 


} 


SubShader { 
Tags { "RenderType"="Opaque" } 
LOD 200 


// We need to declare the properties variable type 
inside of the 

// CGPROGRAM so we can access its Value from 七 he 
properties block. 

CGPROGRAM 

#pragma surface surf Standard fullforwardshadows 

#pragma target 3.0 


struct Input { 
float2 uv MainTex; 


}; 


fixed4 Color; 
float4 AmbientColor; 
float MySliderValue; 


void surf (Input IN, inout SurfaceOutputstandard o) { 
// We can then use the properties values in our 


shader 
fixed4 C = pow(( Color + AmbientColor), 
MySliderValue); 


O.Albedo = c.rgb; 
O.Alpha =: CG.a; 


| 


ENDCG 


| 


FallBack "Diffuse" 


Os 下 载 示例 代码 


可 以 通过 账号 在 http://www.packtpub.com 下 载 你 购买 的 Packet 书 籍 的 示例 代码 文件 。 如 果 你 通过 其 他 途径 购买 了 本 书 ， 可 以 
通过 访问 http://www.packtpub.com/support 来 登记 ， 我 们 会 以 邮件 的 方式 将 代码 文件 发 送 给 你 。 


Os pow (argl，arg2) 是 一 个 内 建 函数 ， 表 示 的 是 数学 上 的 办 函数 ， 第 一 个 参数 是 底数 ， 第 二 个 参数 是 田 次 数 。 


有 关 pow 函 数 的 其 他 内 容 ， 可 以 参见 Cg 的 教程 。Cg 教 程 是 一 个 学 习 着 色 和 了 解 Cg 肴 色 语 言 中 有 哪些 可 用 函数 的 不 错 的 免费 资 
源 。 地 址 为 : http://http.developetr.nvidia.com/CegTutotial/cg_tutorial_appendix_e.html。 


下 面 这 张 截 图 是 使 用 我 们 新 添加 的 属性 ， 在 Inspector 标 签 页 微调 了 颜色 和 饱和 度 之 后 得 到 的 结果 。 





当 你 在 Properties 代 码 块 中 声明 一 个 新 的 属性 时 ， 实 际 上 是 在 给 着 色 器 提供 一 种 获取 材质 的 Inspector 标 签 页 中 值 的 方式 ,， 
这 个 全 仓储 在 变量 名 对 应 的 存储 单元 中 。 在 这 个 例子 中 ，_AmbientColor、_Color 和 _MysliderValue 残 是 所有 我 们 用 来 仓储 微 
调 值 的 变量 。 为 了 能 在 SubShaderf 代 码 块 中 使 用 这 些 值 ， 需 要 创建 三 个 与 属性 变量 同名 的 变量 。 这 样 束 能 给 二 者 自动 建立 一 种 
联系 ,以便 它们 知道 是 在 围绕 同一 个 数据 做 修改 。 此 外 ， 它 还 声明 了 我 们 想 存 储 在 子 着 色 器 变量 中 的 数据 类 型 ， 这 也 给 我 们 日 后 
的 优化 市 来 了 不 少 方便 。 


如 果 你 创建 了 子 着 色 器 变量 ， 残 可 以 在 surf () 函数 中 使 用 它们 了 。 在 这 里 ， 我 们 想 将 Color 和 _AmbientColor 变 量 加 到 一 
起 作为 尾 阔 数 的 底 ， 而 将 .MysliderValue 变 量 作 为 过 国 数 的 惰 次 数 。 


绝 大 部 分 着 色 器 都 是 从 标准 着 色 器 开始 的 ， 然 后 逐步 调整 到 想 要 的 样子 。 我 们 现在 已 经 创建 好 了 一 个 基础 的 表面 着 色 器 ， 通 
过 这 个 表面 看 色 器 你 可 以 创建 任何 你 想 要 的 漫 反 射 组 件 。 


Os 材质 是 资源 的 一 种 ， 也 就 意味 着 游戏 运行 时 任何 一 点 针对 材质 的 修改 都 是 永久 性 的 。 如 果 你 误 操 作 了 菜 个 属性 的 
值 ， 可 以 通过 Cttl+Z 来 撤销 。 





全 


和 其 他 的 编程 语言 秦 不 多 ，Cg 不 允许 代码 错误 。 此 时 ， 如 果 你 的 代码 中 有 笔 误 ,着 色 器 是 不 会 正常 显示 的 。 如 果 友 生 了 这 
种 情况 ， 你 的 材质 会 呈现 无 任何 涂 层 的 洋红 色 : 





如 果 脚 本 不 能 编译 ，Unity 会 阻止 游戏 输出 甚至 阻止 游戏 运行 。 相 反 ， 着 色 器 中 的 错误 并 不 会 阻止 游戏 运行 。 


如 果 你 的 某 个 着 色 器 呈现 洋红 色 ， 惑 要 论点 时 间 研 究 问 题 在 哪里 了 。 如 果 选 中 出 错 的 着 色 器 ， 会 在 Inspector 标 签 页 中 看 到 
一 个 错误 列表 : 


@ Inspector -~ Lighting 
Cookbookshaders/Errorshader Import Settings 


Default Maps 
a Albedo (RGB) 


Imported Object 


Cookbookshaders/Errorshader 


suriace shader [Show generated code 
Fixed function | Show generatad code | 
Compiled code | Tompile sand show code | -| 
Errors (1): 


DD undefined variable " MainTex" unable to find compatible overloaded fur d3d9 32 





除了 显示 出 错 行 之 外 ， 错 误 消息 也 同时 在 告诉 你 应 该 去 这 里 修复 问题 。 上 面 截图 里 的 错误 信息 是 在 删除 SubShader{} 代 码 块 
中 的 sampler2D MainTex 变 量 的 时 候 产 生 的 。 但 是 错误 出 现在 首次 想 要 访问 这 个 变量 的 地 方 。 


找到 并 且 修 复 问 题 的 过 程 称 为 调试 ， 大 家 常 犯 的 错误 如 下 : 
: 少 个 括号 。 如 果 你 在 菜 个 部 分 所 了 一 个 反 括 号 ， 编 译 器 会 在 这 一 部 分 文本 的 最 后 、 最 前 或 者 某 个 新 的 部 分 处 报错 。 
“ 少 了 分 号 。 这 是 最 为 常见 的 一 种 错误 ， 也 是 最 容易 发 现 和 修复 的 。 报 错 信息 通常 出 现在 下 一 行 。 
- 在 Propetties 代 码 块 中 定义 了 一 个 属性 ， 但 是 没有 在 SubShader{} 代 码 块 中 标明 为 一 个 变量 。 
:与 C# 脚 本 混 消 了 ，Cg 中 的 浮 点 数 并 不 需要 在 后 面 加 一 个 f， 比 如 1.0 而 不 是 1.0f。 


着 色 器 提供 的 报错 信息 可 能 非 剃 难 懂 ， 特 别 是 在 某 些 有 特别 严格 的 语法 约束 的 时 候 。 如 果 你 不 懂 报 错 信 息 的 意思 ， 最 好 在 网 
上 搜 一 搜 。Unity 论 坛 里 面 有 很 多 开 友 者 ， 他 们 很 有 可 能 碰 到 或 者 修复 过 你 现在 础 到 的 问题 。 





表面 着 色 器 及 其 属性 的 更 多 内 容 放 在 第 2 草 中 。 如 果 你 想 知 道 着 色 器 火力 全 开 的 时 候 能 做 些 什么 ， 可 以 看 看 第 10 草 ， 这 一 章 
有 本 书 中 所 履 兰 的 大 部 分 局 级 着色 扩 术 。 


第 2 草 ”表面 看 色 器 和 纹理 映射 


在 这 一 章 中 ， 会 研究 表面 着 色 器 。 我 们 会 从 一 个 非 弟 简单 的 无 光 材 料 开始 ， 最 后 做 出 一 个 全 息 投影 和 高 级 地 形 混 合 特效 。 我 
们 还 可 以 用 纹理 来 制作 动画 、 混 合 或 者 其 他 一 些 特 效 。 在 这 一 章 中 ， 你 会 学 到 如 下 内 容 : 


- 漫 反 射 着 色 


. 给 着 色 器 添加 纹理 
. 通过 修改 UV 值 来 滑动 纹理 
法 线 映 射 


- 创建 透明 材质 


如 


就 


. 打包 和 混合 纹理 


: 在 地 形 周 围 创 建 圆 环 


我 们 在 第 1 章 中 已 经 对 表面 着 色 器 进行 了 初步 讲解 ， 表 面 着 色 器 是 Unity 中 主要 使 用 的 一 种 着 色 器 。 本 章 会 深入 探讨 表面 着 
色 器 及 其 工作 原理 。 一 般 来 讲 ， 使 用 每 一 个 表面 着 色 器 都 需要 两 个 基本 步骤 : 首先 需要 给 你 想 描 述 的 材质 指定 特殊 的 物理 属性 ， 
比如 其 漫 反射 颜色 、 光 滑 度 、 透 明度 等 。 这 些 物理 属性 会 在 一 个 名 为 表面 遂 数 (surface function) 的 函数 中 进行 初始 化 ， 人 存储 
在 一 个 名 为 表面 输出 (surface output) 的 结构 中 。 第 二 步 是 surface output 会 被 传递 给 光照 模型 (lighting model) 。 光 照 模 
型 是 一 个 特殊 的 函数 ， 该 函数 还 依赖 于 场景 中 周围 的 光照 信息 。 所 有 这 些 参数 会 被 用 来 计算 模型 的 每 一 个 像素 上 最 终 的 颜色 。 光 
照 函数 是 着 色 器 的 这 部 分 计算 的 根源 ， 因 为 光照 函数 决定 了 光线 在 接触 到 材质 时 的 行为 。 


下 面 这 个 图 简单 总 结 了 一 下 表面 看 色 器 的 工作 原理 。 目 定义 光照 模型 的 内 容 会 在 第 3 章 中 展开 。 第 5 和 章 主 要 天 注 顶 点 编辑 
器 。 


Ne Ea SurfaceOutput . 
质点 编辑 器 表面 函数 光照 模型 





2.2 漫 反 射 看 色 
在 开始 学 习 纹理 映射 之 前 ， 我 们 需要 先 理解 漫 反射 着 色 是 怎么 工作 的 。 某 些 物体 的 颜色 比较 均匀 ， 表 面 很 光滑 ， 但 是 又 不 是 


光滑 到 那 种 像 镜 子 一 样 光 之 的 程度 。 这 种 非 肥 区 材料 最 好 的 泻 染 方式 融 是 使 用 漫 反 射 着 色 器 。 虽 然 在 真实 世界 中 纯 漫 反射 材料 本 
身 并 不 仔 企 ， 但 在 游戏 世界 中 漫 反 射 看 色 器 是 一 种 大 量 用 到 的 相对 廉价 的 着 色 廊 式 。 


2.2.1 ”准备 工作 


创建 漫 反射 着 色 器 有 多 种 方式 。 最 快 的 一 种 方式 是 从 Unity 5 的 标准 着 色 器 开始 ， 然 后 编辑 标准 着 色 器 ， 移 除 所 有 纹理 。 在 
第 1 章 中 我 们 就 是 这 么 做 的 。 


2.2.2 操作 步骤 


我 们 从 标准 着 色 器 开始 ， 按 照 下 面 的 步骤 逐步 进行 : 
1. 删 除 除 Color 之 外 的 所 有 属性 : 


了 


2. 任 SubShaderf} 部 分 ， 删 除 MainTex、 Glossiness 和 Metallic 变 量 。 注 意 不 要 删除 uv MainTex， 因 为 Cg 不 接受 空 的 输 
入 。 这 个 值 会 被 忽略 。 


3. 删 除 surf () 锐 数 的 函数 体 ， 用 下 面 的 代码 蔡 换 : 


OAlbede = Color.rgb; 


4. 你 的 着 色 器 应 该 看 起 来 是 这 样 的 : 


Shader "CookbookShaders/Diffuse" { 
Properties { 
Color: ("Golor®.; Colory) = (ll Li 


| 


SubShader |{ 
Tags { "RenderType"="Opaque" } 
LOD 200 


CGPROGRAM 
#pragma surface surf Standard fullforwardshadows 
#pragma target 3.0 
struct Input { 
float2 uv MainTex; 


}; 


fixed4 Color; 


void surf (Input IN, inout SurfaceOutputSstandard o) { 
oOo.Albedo = Color.rgb; 


} 


ENDCG 


} 


FallBack "Diffuse" 


因为 该 着 色 器 是 在 一 个 标准 着 色 器 的 基础 上 修改 的 ， 它 会 使 用 基于 物理 基础 的 泻 染 方 式 来 模拟 光照 行为 。 如 果 你 想 做 一 种 非 
拟 实 的 外 观 ， 可 以 直接 修改 第 一 个 #pragma 指 令 来 让 其 使 用 Lambert 而 不 是 Standard。 如 果 你 这 么 做 了 ， 还 应 该 将 
SurfaceOutputStandard 蔡 换 为 SurfaceOutput。 


2.2.3 ”工作 原理 


着 色 器 中 ， 材 质 的 泻 染 属 性 和 光照 模型 之 间 是 通过 表面 输出 来 通信 的 。 表 面 输出 是 对 当前 光照 模型 所 需 的 所 有 参数 的 一 个 封 
和 妆 。 所 以 你 应 该 能 理解 不 同 的 光照 模型 需要 不 同 的 表面 输出 结构 了 。 下 面 询 出 了 Unity 5 中 三 种 主要 的 表面 输出 结构 。 


本 任意 表面 着 色 器 标准 着 色 器 
{安信 下 和 有 T 、 

SurfaceOutput SurtaceOutputStandard 
2 任意 表面 着 色 器 标准 着 色 器 (高光 设置 ) 
锅 光 着 色 从 


SurfaceOutput SurtaceOutputStandardSpecular 





SurfaceOutput 结 构 有 如 下 属性 : 
“ fixed3Albedo: 表示 材质 的 漫 反射 颜色 。 
. fixed3Normal: 如 果 写 的 话 表示 切面 法 线 。 
:fixed3Emission: 表示 材质 发 射 的 颜色 (该 属性 在 标准 着 色 器 中 声明 为 half3) 。 
` fixed Alpha: 表示 材质 的 透明 度 。 
halfSpecular: 表示 光亮 度 ， 值 从 0 到 1。 


. fixed Gloss: 表示 光 强 度 。 


SurfaceOutputStandard 结 构 有 如 下 属性 : 


* fixed3Normal。 

half3Emission: 该 属性 声明 为 half3， 而 在 SurfaceOutput 中 名 字 是 fixed3。 
* fixed Alpha。 

half Occlusion: 表示 遮挡， 默认 是 1。 

. half Smoothness: 表示 光滑 度 ，0 表 示 粗 糙 ，1 表 示 光 滑 。 

:half Metallic: 0 表示 非 金 属 ，1 表 示人 金属 。 
SurfaceOutputStandardSpecular 结 构 有 如 下 属性 : 

“ fxed3Albedo。 

* fixed3Normal。 

* half3Emissiono 

* fixed Alpha。 

.half 〇 Occlusion 。 

half Smoothness。 

:fixed3Speculaf: 表示 高 光 颜 色 ， 与 SutfaceOutput 结 构 中 的 Specular 属 性 有 很 大 不 同 ， 这 里 可 以 指定 一 种 颜色 而 非 单一 值 。 


正确 使 用 表面 着 色 器 很 重要 的 一 点 是 用 正确 的 值 初始 化 表面 输出 结构 。 


2.3 ”使 用 包 委 效 组 


简单 来 讲 ， 看 色 器 中 的 代码 需要 在 屏幕 的 每 一 个 像素 上 执行 ， 这 也 是 为 什么 GPU 现在 都 需要 优化 成 并 行 计 算 的 。 同 样 的 道 
理 ， 在 Cg 中 的 标准 变量 类 型 和 操作 符 也 得 考虑 这 些 优化 。 理 解 这 些 原理 不 仪 有 助 于 正确 使 用 着 色 器 ， 而 且 可 以 帮助 我 们 写 出 更 
优 的 代码 。 


2.3.1 操作 步骤 


在 Cg 中 有 两 种 类 型 的 变量 : 单一 值 变 量 和 包 妆 数 组 。 后 者 很 容易 通过 名 字 识 别 出 来 ， 因 为 通 剃 会 在 名 字 后 面 加 一 个 数 ， 比 
如 float3 或 者 int4。 顾 名 思 义 ， 这 种 包装 数组 类 型 的 变量 类 似 于 结构 体 ， 每 一 个 数组 包含 数 个 单一 值 。Cg 将 其 称 为 包 六 数组 ， 尽 
管 这 种 结构 并 不 是 传统 意义 上 的 数组 。 


包 委 数组 的 元 素 可 以 作为 一 个 普通 结构 访问 到 ， 一 般 称 之 为 Xx、y、z 和 w。 然 而 Cg 还 给 这 些 元 素 提供 了 一 些 其 他 的 名 字 ， 比 


如 r、g、b、a 等 。 使 用 xyzw 和 和 rgba 是 没有 区 别 的 ， 但 是 对 于 读者 而 言 却 有 很 大 差异 ， 因 此 应 该 选择 合适 的 方式 让 代码 更 加 表 
义 。 其 实 着 色 器 编码 通常 是 处 理 一 些 位 置 和 颜色 的 计算 。 你 可 能 已 经 在 标准 着 色 器 中 见 过 了 : 


oO.Alpha = ‘Color.a; 


在 这 一 行 代码 中 ，o 是 一 个 结构 体 ，_Color 是 一 个 包 妆 数组 。 这 也 是 为 什么 Cg 不 允许 将 两 种 方式 混 着 用 : 比如 不 能 使 用 


_Color.xgz。 


包 委 数组 的 另外 一 个 不 同 于 C# 的 重要 功能 是 调和 (swizzling) 。C9g 也 可 以 通过 简单 一 行 代 码 来 处 理 和 重新 排序 包 妆 数组 中 
的 元 素 。 册 看 一 个 标准 着 色 器 中 的 例子 : 


oO.Albedo = Color.rgb:; 


Albedo 是 fixed3 类 型 的 ， 也 束 是 说 其 包 合 三 个 fixed 类 型 的 值 。 然 而 _Color 是 定义 为 fixed4 类 型 的 ， 如 果 和 直接 将 Color 赋 值 给 
Albedo 会 出 现 编译 错误 ， 因 为 类 型 不 匹配 。C# 中 的 实现 方式 会 是 这 样 的 : 


SAlLbpedo,r Solor. Es 
SALbedo.g = COlOr.g; 
osAlbedob = Color:b; 


但 是 在 Cg 中 可 以 使 用 一 种 简化 方式 : 


SRALSeaes = Color.rqgbs 
Cg 还 可 以 对 元 素 重 新 排序 ， 比 如 写成 _Color.bgr 可 以 将 红色 成 分 和 蓝 色 成 分 进行 对 调 。 


最 后 ， 如 果 将 单一 值 赋 给 包 沪 数组 ， 则 这 个 单一 值 会 填充 数组 的 每 一 个 元 素 : 


Oo.Albedo = 0; // Black =(0,0,0) 
oOo.Albedo = 1; // White =(1,1,1 


这 一 特性 又 称 为 涂抹 (smearing) 。 
调和 也 可 以 用 在 表达 式 的 左边 ， 以 重 写 包装 数组 的 部 分 元 素 : 
OAlbede.rg = COLOr. rg 


这 种 情况 称 为 遮羞 (masking) 。 


包 六 矩阵 
调和 特性 真正 大 显 身 手 的 地 方 是 用 在 包 沪 和 矩阵 上 。Cg 接 受 算 阵 类 型 的 声明 ， 比 如 float4x4 表 示 一 个 浮 点 型 数据 构成 的 4 行 4 


列 的 和 矩阵。 你 可 以 通过 _mRC 标 注 来 访问 矩阵 的 某 个 具体 元 素 ， 其 中 R 表 示 行 号 ，C 表 示 列 号 : 


float4x4 matrix; 


1 
float first = matrix. m00; 
float Jlast = Tatrix. m33; 


_mRC 标 注 可 以 链 式 调用 : 


float4 diagonal = matrix. m00 mll m22 m33 ; 
使 用 中 括号 可 以 选择 一 整 行 : 


float4 firstRow = matrix[0].; 
// Equivalent to 
float4 firstRow = matrix. m00 m0l1 m02 m03; 


2.3.2 参考 


包 委 数组 可 以 况 是 Cg 中 最 酷 炉 的 特性 之 一 ， 你 可 以 访问 下 列 网 址 查看 天 于 包 委 数组 的 更 多 内 
容 : http://http.developer.nvidia.com/CgTutorial/cg tutorial chapter02.html。 


2.4 ”给 在 色 器 添加 纹理 


在 模拟 现实 效果 方面 ， 纹 理 可 以 让 着 色 器 迅速 生动 起 来 。 为 了 高 效 使 用 纹理 ， 我 们 需要 理解 二 维 图 像 是 如 何 映射 成 三 维 模 型 
的 。 这 个 映射 过 程 称 为 纹理 映射 。 为 了 进行 纹理 映射 ， 我 们 需要 在 着 色 器 和 想 要 应 用 纹理 的 三 维 模 型 上 下 后 工夫 。 模 型 事实 上 是 
由 三 角形 组 成 的 ， 三 角形 的 每 一 个 顶点 可 以 存储 着 色 器 可 以 访问 的 数据 。UV 数 据 是 项 点 中 存储 的 诸多 重要 信息 之 一 。UV 数 据 由 
两 个 坐标 组 成 ， 也 就是 U 和 V， 取 值 泡 围 为 0 到 1， 它 们 表示 了 二 维 图 像 中 像素 映射 到 顶点 时 的 XY 坐标 。UV 数 据 只 是 给 顶点 用 
的 ， 三 角形 内 部 其 他 位 置 上 的 值 则 是 GPU 根据 差 值 算法 按照 一 定 的 间 隅 比例 去 纹理 上 取 的 值 。 下 图 展示 了 二 维 纹理 是 如 何 映射 
到 一 个 三 维 模型 的 基础 三 角形 上 去 的 。 





二 角形 - 维 纹 理 


UV 数据 保存 在 三 维 模型 中 ， 并 需要 用 专 | 的 建 模 软 件 才 可 编辑 。 某 些 模型 没有 UV 组 件 ， 也 束 不 能 支持 纹理 映射 了 。 比 如 之 
前 举例 的 那个 斯 坦 福 兔子 最 开始 束 没 有 UV 组 件 。 


2.4.1 准备 工作 


在 这 一 节 中 ， 需 要 一 个 有 UV 数据 的 三 维 模 型 及 其 纹理 。 在 开始 之 前 需要 将 这 二 者 导入 Unity 中 。 你 可 以 直接 将 其 拖 蝶 到 
Unity 编 辑 器 中 。 标 准 着 色 器 默认 支持 纹理 映射 ， 所 以 我 们 会 用 这 个 标准 着 色 器 来 解释 纹理 映射 是 怎么 工作 的 。 


使 用 标准 着 色 器 给 模型 添加 纹理 非常 简单 ， 步 骤 是 : 
1. 创 建 一 个 新 的 名 为 TexturedShader 的 标准 着 色 器 。 
2. 创 建 一 个 新 的 名 为 TexturedMaterial 的 材质 。 


3. 通 过 拖 蝶 将 着 色 器 指定 给 材质 。 


4. 选 中 材质 后 ， 将 纹理 拖 蝶 到 名 为 Albedo (RGB) 的 空 长 方形 中 。 如 果 你 按照 这 个 步骤 进行 的 话 ， 材 质 的 Inspector 标 签 页 


应 该 看 起 来 像 这 样 : 


全 Inspector -= Lighting 
a aad | 
shader |CookbookShaders/TexturedShader 


Color 
Albedo (RGB) 


Ee 


Offset Select 


smoothness 0.181 


Metallic 





标准 着 色 器 知道 如 何 通 过 UV 数据 将 二 维 图 像 映 射 到 三 维 模型 上 。 


当 标 准 着 色 器 在 材质 的 审查 器 (inspector) 中 被 使 用 时 ， 纹 理 映射 背后 的 过 程 对 于 开 友 人 员 是 完全 透明 的 。 如 果 我 们 想 理 


解 它 是 如 何 工 作 的 ， 需 要 深入 看 一 看 TexturedShader。 从 Properties 部 分 来 看 ， 可 以 友 现 Albedo (RGB) 纹理 实际 引用 的 代码 


是 MainTex: 


_MainTex ("Albedo (RGB)", 2D) = "white" {} 
在 CGPROGRAM 部 分 ， 该 纹理 被 定义 为 sampler2D 一 二 维 纹理 的 标准 类 型 : 


sampler2D MainTex; 


下 一 行 代 码 是 一 个 名 为 Input 的 结构 体 。 这 是 表面 溺 数 的 输入 参数 ， 这 个 输入 参数 包谷 一 个 名 为 uv_MainTex 的 包装 数组 : 


struct Input { 
float2 uv MainTex,; 


1 


每 次 surf () 尔 数 被 调用 时 ，Input 结 构 会 包含 三维 模型 斋 要 泻 染 的 某 一 个 特殊 点 的 _jMainTex 的 UV 值 。 标 准 着 色 器 会 识别 
出 uv_MainTex 引 用 的 是 _MainTex 的 值 ， 并 且 会 自动 对 其 进行 初始 化 。 如 果 你 对 于 UV 值 是 如 何 从 三 维 模型 映射 到 二 维 纹理 上 的 
比较 感 兴趣 ， 可 以 看 看 第 3 草 的 内 容 。 


最 后 ， 表 面 函 数 的 第 一 行 中 ，UV 数 据 被 用 来 对 纹理 进行 采样 : 
fixed4 c = tex2D ( MainTex, IN.uv MainTex) * Color:; 
这 个 过 程 是 通过 Cg 的 tex2D () 函数 来 实现 的 。 该 函数 接受 一 个 纹理 和 UV， 并 返回 像素 在 该 位 置 的 颜色 值 。 
Oi UV 坐标 都 是 从 0 到 1， 其 中 (0，0) 和 (1，1) 表示 的 是 两 个 对 顶 角 。 不 同 的 实现 方式 会 把 UV 和 不 同 的 角 联 系 


起 来 。 如 果 你 的 纹理 看 起 来 有 点 翻转 了 ， 试 着 二 倒 一 下 V 的 值 。 


2.4.4 ”更 多 内 容 


当 你 向 Unity 导 入 一 个 纹理 的 时 候 ， 其 实 是 在 给 sampler2D 准 备 一 些 它 需 要 用 到 的 属性 。 最 重要 的 是 Filter (过 滤 ) 模式 ， 过 
滤 模式 会 决定 纹理 采样 时 颜色 是 如 何 插值 的 。 一 般 而 言 ，UV 数 据 不 会 准确 指向 像素 的 中 心 ， 而 其 他 一 些 时候 你 可 能 需要 在 最 接 
近 的 像素 间 进 行 插值 来 让 颜色 看 起 来 匀称 。 下 图 是 一 个 样 例 纹理 的 Inspector 标 签 页 截图 : 


Inspector -~ Lighting 


i 


A ImPork Settings 
a 


Texture Type Advanced 


Jan Power of 2 Wp 
Mapping "None 
Avolution TYype Mane 
FHRUD Edge Sears 
Read/Write Enabled 
Import Type Default 
Alpha from Grayscale 
lal: :| 
Bypass sRGB Sampling 
Encode as RGBM 
sprite Mode 
Generate Mp Macs 
In Lineat Space 
Border Mp Maps 
Mip Map Filtering 
Fadeout Mip Maps 
Wrap Mode Repeat 


Filter Mode “Blinear 
Aniso Level | 1 


上 | 四 二 和 Ee 络 er - 
| | 辐 | a | | Te 加 四 | | 
I 十 进 E Te Em PR | E 


Max Size Trilinear 





Foermat Automatic Compressed 


Raevelt | | Apply 


对 于 大 部 分 应 用 程序 ，Bilinear ( 双 线 性 ) 过 滤 是 一 种 廉价 而 又 有 效 的 平滑 纹理 的 方式 。 但 是 如 果 你 创建 的 是 二 维 游戏 ， 那 
么 双 线 性 可 能 产生 一 些 模糊 的 地 方 ， 这 时 你 可 以 使 用 Point (点 ) 过 滤 来 移 除 纹理 采样 过 程 的 插值 。 


当 我 们 从 一 个 大 倾角 观察 纹理 时 ， 纹 理 采 样 通 贡 会 产生 一 综 不 友好 的 瑕 水 。 你 可 以 通过 增加 Aniso Level 的 值 来 减少 这 些 瑕 
泪 ， 这 个 改动 对 于 地 板 和 天 化 板 这 种 类 型 的 纹理 非 曲 有效， 因为 这 些 纹理 中 的 一 些 毛 刺 会 破坏 视觉 的 连续 性 。 


2.4.5 ”参考 


如 果 你 想 深 入 了 解 纹 理 映射 的 更 多 内 容 ， 可 以 查阅 下 面 的 网 址 : 





http://http.developer.nvidia.com/CgTutorial/cg tutorial chapter03.htm|。 
也 可 以 在 下 面 这 个 网 址 找到 所 有 导入 二 维 纹理 时 的 可 用 选项 : 


http://docs.unity3d.com/Manual/class-Texturelmporter.html 


2.5 ” 退 过 修改 UV 信和 来 滑动 纹理 


在 物体 表面 滑动 纹理 是 现代 游戏 行业 中 一 种 非 音 贡 用 的 纹理 扩 术 。 通 过 滑动 纹理 可 以 创建 出 诸如 瀑布 、 河 沅 、 熔 五 等 诸多 生 
动 的 特效 。 这 种 技术 也 是 制作 精灵 特效 的 基础 ， 天 于 这 部 分 内 容 会 放 人 在 本 章 另外 一 小 节 中 。 首 移 让 我 们 看 一 下 如 何在 表面 看 色 器 
中 创建 一 个 向 单 的 滑动 特效 。 


2.5.1 ”准备 工作 
开始 这 一 节 之 前 ， 需 要 创建 一 个 新 的 着 色 器 文件 和 材质 文件 。 需 要 一 个 干净 的 着 色 器 来 开始 我 们 对 滑动 特效 的 学 习 。 


2.5.2 “操作 步骤 


首先 ， 需 要 导入 新 创建 的 着 色 器 文件 ， 然 后 按照 下 面 的 步 又 输入 代码 : 


1. 着 色 器 需要 两 个 新 的 属性 来 控制 纹理 的 滑动 速度 ， 因 此 我 们 首先 给 X 方 同和 Y 方 向 各 创建 一 个 速度 属性 。 代 码 如 下 : 


Properties { 


MATHTEINE (DIEFIUSS Tn Coler) = ‘(1sy1) 
MainTex ("Base (RGB)", 2D) = "white" {} 
ScrollXSpeed ("X Scroll Speed"”,; "Range(0;10)) :=:2 
.ScrollYSpeed ("YY Scroll Speed"; "Range(0;10)) =2 


| 


2. 修 改 CGPROGRAM 部 分 的 Cg 属性 ， 创 建 一 些 新 变量 来 访问 新 添加 的 属性 : 


fixed4 _MalnITInt; 
fixed ScrollXSpeed.; 
fixed ‘ScrollYSpeeéed; 
sampler2D MainTex.; 


3. 修 改 表面 函数 来 修改 提供 给 tex2D () 遂 数 的 UV 值 。 然 后 使 用 内 建 的 Time 变 量 来 在 按 下 Play 按 钮 的 时 候 动 态 变 更 UV 
值 : 


void surf (Input IN, inout SurfaceOutput oo) 
// Create a separate variable to store our UVs 
// before we pass them to the tex2D() function 
fixed2 scrolledUV = IN.uv MainTex; 


// Create variables that store the individual x and y 
// components for the UV's scaled by time 

fxed xScrollValue = ScrollXSpeed * Time; 

fixed YScrollValue = ScrollYSpeed * Time; 


// ApplLy the final UV offset 
scrolledUV += fixed2 (xScrollValue, yScrollValue).,， 


// Apply textures and tint 

half4 & = tex2D {( MainTex; SerolledUV):; 
o.Albedo = cc.rgb * MainTint; 

-ALN = 


下 图 便 是 使 用 滑动 UV 系统 创建 的 一 条 简单 的 河流 的 样子 。 你 可 以 从 本 书 附 市 的 代码 文件 中 查看 到 ScrollingUVs 的 值 。 





2.5.3 ”工作 原理 


滑动 系统 自 先 声明 一 些 属 性 ， 通 过 这 些 属 性 看 色 器 可 以 增加 或 者 减 小 特效 的 滑动 速度 。 在 夸 层 ， 这 些 浮 点 数 会 从 材质 的 
Inspector 标 签 页 传递 到 着 色 器 的 表面 浮 数 。 关 于 着 色 器 属性 的 更 多 内 容 请 查阅 第 1 章 。 


一 旦 我 们 得 到 了 这 些 从 材质 Inspector 标 签 页 中 传递 过 来 的 浮 点 值 ， 束 可 以 根据 这 些 值 来 偏 移 着 色 器 中 的 UV 值 。 


开始 之 前 我 们 首先 将 UV 值 保存 在 另外 一 个 名 为 scrolledUV 的 变量 中 。 这 个 变量 必须 是 float2 或 者 fixed2 类 型 的 ， 因 为 传 给 
我 们 的 UV 值 在 Input 结 构 中 声明 为 了 float2 类 型 : 


struct Input 


{ 


float2 uv MainTex,; 


| 


一 旦 得 天 了 网 格 的 UV 值 ， 我 们 残 可 以 用 滑动 速度 变量 和 内 建 的 递归 时 间 变 量 Time 来 对 纹理 进行 债 移 了 。 这 个 内 建 的 时 间 
变量 返回 一 个 float4 类 型 的 变量 ,意味 着 该 变量 的 每 一 个 组 件 包 合 一 个 不 同 的 时 间 值 作为 系统 的 游戏 时 间 。 


天 于 这 个 殉 归 时 间 的 完整 摘 述 可 以 查看 下 面 这 个 链接 : 
http://docs.unity3d.com/Manual/SL-UnityShaderVariables.html 


这 个 Time 变 量 会 随 着 游戏 时 间 的 推移 给 我 们 提供 一 个 递增 的 浮 点 数值 ， 所 以 可 以 使 用 这 个 值 来 移动 我 们 的 UV 值 ， 具 体 的 
移动 量 是 时 间 和 滑动 速度 的 乘积 : 
// Create Variables that store the individual x and Y 
// components for the uv's scaled by time 


fixed xScrollValue = ScrollXSpeed * Time; 
fixed yScrollValue = ScrollYSpeed * Time; 


正确 地 计算 了 不 同时 刻 的 偏 移 之 后 ， 我 们 可 以 将 新 计算 出 来 的 偏 移 量 添加 到 原始 的 UV 位 置 。 这 残 是 为 什么 在 下 一 行 代码 中 
使 用 了 += 运 算 行 ， 因 为 我 们 想 以 原始 的 UV 位 置 作为 基础 来 添加 一 些 偏 移 量 ， 然 后 将 添加 了 偏 移 量 的 UV 值 传递 给 tex2D () 消 
数 作 为 纹理 的 新 UV 值 。 通 过 这 些 代 码 束 可 以 让 纹理 在 表面 移动 了 。 我 们 其 实 完全 是 在 人 为 操作 这 些 UV 值 ， 所 以 实际 上 是 通过 操 
作 UV 信 来 伪造 出 一 种 纹理 在 移动 的 假象 : 


scrolledUV += fixed2 (xScrollValue, yScrollValue); 
half4 ¢ = tex2D ( MainTex, scrolledUV); 


2.6 ”法 线 映 慰 


三 维 模 型 中 的 每 一 个 三 角形 都 有 一 个 面 朝方 钻 (facing direction) ,顾名思义 指 的 是 三 角形 的 朝向 。 这 个 万 同 通 常用 一 个 
从 三 角形 中 心 出 友 素 和 直 于 三 角形 表面 的 箭头 表示 。 面 朝方 向 对 于 光线 在 物体 表面 反射 的 时 候 起 到 了 至 天 重要 的 作用 。 如 果 两 个 相 
隔 很 近 的 三 角形 朝向 不 同 ， 它 们 残 会 将 照射 光 反射 到 不 同 的 角度 上 ， 因 此 这 两 个 三 角形 的 着 色 方 式 会 大 不 一 样 。 对 于 弧 形 物体 整 
有 操 麻 烦 了 ， 因 为 弧 形 表面 没 法 用 平 的 三 角形 拼凑 出 来 。 


为 了 避免 这 个 问题 ， 在 处 理 弧 形 表面 的 光照 效果 时 ， 我 们 忽略 其 朝向 ， 而 是 使 用 其 法 线 方向 (normal direction) 。 在 2.4 
证 中 已 经 提 到 过 了 ， 顶 点 可 以 储存 数据 。 在 顶点 所 保存 的 数据 中 ， 法 线 廊 同 是 仅 次 于 UV 值 的 一 个 非常 重要 的 参数 。 法 线 万 同 是 
一 个 单位 长 度 的 向 量 ， 表 示 项 点 面 朝 的 方向 。 与 面 朝 万 向 不 同 的 是 ， 三 角形 中 的 每 一 个 点 都 有 其 独 有 的 法 线 方向 ， 它 们 的 法 线 方 
同 是 基于 顶点 的 法 线 万 同 通 过 线性 插值 得 到 的 。 通 过 这 种 方式 ， 我 们 可 以 用 一 些 低 精 度 模型 制作 出 高 精度 的 几何 体 。 下 图 展示 了 
一 个 相同 的 几何 体 在 使 用 不 同 的 顶点 法 绪 时 的 泻 染 效 果 。 最 左边 这 个 图 像 中 ， 法 线 完 全 垂直 于 三 个 顶点 围城 的 平面 ， 可 以 看 出 每 
个 面 之 间 有 清晰 的 分 春 ， 而 最 右 侧 的 图 像 中 法 续 是 在 整个 表面 进行 插值 计算 得 到 的 ， 通 过 这 种 方式 哪怕 物体 表面 是 粗糙 的 ， 也 可 
以 让 它 看 起 来 很 光 消 。 通 过 下 图 很 容易 看 出 来 ， 即 便 是 三 个 一 模 一 样 的 几何 体 ， 它 们 在 光照 下 的 反射 情况 也 大 不 一 样 。 尽 管 最 右 
边 这 个 图 像 中 的 几何 体 也 是 用 平面 三 角形 围 成 的 ， 但 是 看 起 来 残 好 像 它 是 一 个 完美 的 球面 一 样 。 








使 用 顶点 法 线 插值 得 到 的 物体 都 有 一 个 普遍 的 特点 : 表面 看 着 很 光滑 ， 但 是 边缘 却 很 尖锐 。 这 一 点 可 以 通过 标注 出 每 一 个 顶 
所 保存 的 法 线 万 向 看 出 来 ， 如 下 图 所 示 。 你 可 以 友 现 虽然 每 一 个 三 角形 都 只 有 三 个 法 线 ， 但 是 大 部 分 三 角形 放 在 一 起 的 时 候 ,， 某 
些 相 邻 的 项 点 的 法 线 万 向 是 一 样 的 ， 这 也 是 为 什么 右边 这 个 图 像 中 的 法 线 数量 较 少 的 原因 ， 因 为 很 多 顶点 的 法 线 都 重合 了 。 





计算 三 维 模 型 的 法 线 原 本 是 一 项 技术 ， 但 是 迅速 让 位 给 另外 一 种 更 高 级 的 技术 ， 即 法 线 映射 。 与 纹理 映射 差不多 ， 法 线 方向 
可 以 通过 一 个 额外 的 纹理 来 提供 。 这 个 额外 的 纹理 通常 称 为 法 线 映射 或 者 pump 映 射 。 法 线 映 射 通常 是 一 些 RGB 图 像 ，RGB 的 成 
分 值 分 别 用 来 表示 法 线 方向 (X，Y，Z) 的 值 。 有 很 多 方式 可 以 创建 法 线 映 射 。 某 些 应 用 程序 ， 比 如 
CrazyBump (http://www.crazybump.com/) 或 者 NDO Painter (http://quixel.se/ndo/) ， 可 以 接受 一 个 二 维 数据 然后 将 
其 转化 为 你 想 要 的 法 线 数据 。 其 他 一 些 应 用 程序 ， 比 如 Zbrush 4R7 (http://www.pixologic.com/) 和 
AUTODESK (http://usa.autodesk.com) ， 可 以 接受 一 个 三 维 雕 刻 数据 ， 然 后 创建 一 些 法 绪 映 射 。 创 建 法 线 映 射 的 步骤 完全 超 
出 了 本 书 的 学 围 ， 但 是 上 面 提 到 的 这 些 链 接 或 许 会 给 你 提供 些许 帮助 。 


在 Unity 中 给 表面 着 色 器 添加 法 绪 映 射 的 过 程 非 钊 简单 ， 只 需要 使 用 UnpackNormals () 函数 融 可 以 了 ， 我 们 接 下 来 看 看 
该 怎么 做 。 


同 


2.6.1 ”准备 工作 

创建 一 个 新 的 材质 和 着 色 器 ， 然 后 启动 一 个 新 的 项 目 ， 将 新 的 着 色 器 和 材质 放置 到 Scen 视 图 中 。 这 样 我 们 就 可 以 得 到 一 个 
干净 的 工作 空间 ， 接 下 来 可 以 看 看 法 线 映射 技术 。 

这 一 节 需 要 一 个 法 线 映射 ， 如 果 没 有 的 话 在 本 书 附 市 的 Unity 项 目 中 有 一 个 。 


本 书 中 附 市 的 法 绪 映 射 示例 如 下 图 所 示 : 


2.6.2 ”操作 步骤 


下 面 是 创建 法 线 映射 着 色 器 的 详细 步 又 : 


1. 设 置 好 Properties 代 码 块 ， 添 加 一 个 颜色 和 纹理 。 





Properties 


{ 


-ManTiNE (DEffUSe TENL™, ‘COPOD) = (Lyl.1;y 
NormalTex ("Normal Map", 2D) = "bump" {} 
} 
Os 关 通过 将 纹理 初始 化 为 bump， 告 诉 Unity_NormalTex 会 包含 一 个 法 线 映射 。 如 果 没 有 设置 纹理 ， 则 会 使 用 一 个 灰 度 


纹理 替代 。 这 里 用 的 (0.5, 0.5 ， 0.5 ， 1 ) 顾 色 用 来 表示 一 点 bump 都 没有 。 
2. 将 这 些 属性 链接 到 Cg 程序 ， 方 法 是 在 CGPROGRAM 语 句 下 面 的 SubShader{} 中 进行 声明 


CPROGRAM 
#pragma surface surf Lambert 


// Link the property to the CG program 
sampler2D NormalTex; 
float4 MainTint,; 


3, 需 要 确保 Input 结 构 体 使 用 了 正确 的 变量 名 进行 更 新 ， 只 有 这 样 才能 给 法 线 映 射 纹理 使 用 模型 的 UV 什 


// Make sure you get the UVs for the texture in the struct 


struct Input 


| 


float2 uv NormalTex; 


4. 最 后 使 用 内 建 的 UnpackNormal () 函数 来 从 法 线 映 射 纹 理 中 提取 法 线 信息 ， 然 后 只 需要 将 这 些 新 的 法 线 应 用 到 表面 着 色 
器 的 输出 中 残 可 以 了 : 
// Get the normal data out of the normal map texture 
// using the UnpackNormal function 


float3 normalMap = UnpackNormal (tex2D( NormalTex, 
IN.uv NormalTex)); 


// Apply the new normal to the lighting model 


oO.Normal = normalMap.rgb; 


下 图 是 使 用 了 我 们 的 法 线 映 射 着 色 器 之 后 得 到 的 效果 : 
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没有 法 线 映 射 有 法 线 映 别 





Os 着 色 器 可 以 既 有 纹理 映射 也 有 法 线 映射 。 很 多 时 候 这 两 种 映射 使 用 相同 的 UV 数据 ， 然 而 我 们 也 可 以 在 顶点 数据 
(UV2) 中 给 法 线 映射 专门 提供 另外 一 套 UV 数据 。 
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实际 的 数学 过 程 中 如 何 实现 法 线 映 射 特效 完全 超出 了 本 书 的 范畴 ， 你 只 需要 知道 Unity 已 经 做 好 了 这 些 就 可 以 了 。Unity 创 建 
了 一 些 方便 的 函数 ， 让 我 们 不 用 一 遍 一 遍地 耗 在 一 些 重复 的 数学 计算 中 。 这 也 是 表面 着 色 器 是 一 种 高 效 地 编写 着 色 器 的 方式 的 原 
因 之 一 。 

看 看 Unity 安 装 目 录 的 Data 目 录 下 的 UnityCG.cginc 文 件 ， 应 该 可 以 找到 UnpackNormal () 函数 的 定义 。 当 你 在 表面 着 色 
器 中 声明 这 个 函数 时 ，Unity 会 接收 到 你 所 提供 的 法 线 映 射 ， 然 后 对 其 进行 适当 的 处 理 以 确保 你 可 以 在 每 一 个 像素 的 光照 函数 中 
正确 使 用 这 些 映射 结果 。 这 非常 节约 时 间 ! 在 采样 纹理 的 时 候 ， 采 样 结果 是 0 到 1 的 RGB 值 ， 但 是 法 线 向 量 的 值 是 从 -1 到 1。 
UnpackNormal () 知道 如 何 匹 配对 应 的 值 域 。 

一 旦 用 UnpackNormal () 遂 数 处 理 了 法 线 映射 之 后 ， 便 会 将 法 线 映射 回 传 给 SurfaceOutput 结 构 ， 这 样 它 就 可 以 用 在 光 
照 国 数 中 了 。 这 是 通过 o.Normal=normalMap.rgb 来 完成 的 。 我 们 会 在 第 3 章 中 看 到 法 线 是 如 何 用 来 计算 每 个 像素 上 的 最 终 颜 
色 的 。 


还 可 以 在 法 线 映 射 着 色 器 中 添加 更 多 的 控件 ， 让 用 户 可 以 调整 法 线 映射 的 光 强 。 这 可 以 通过 修改 法 线 映 射 变 量 的 x 和 y 值 来 完 
成 。 给 Properties 代 码 块 添加 另外 一 个 名 为 NormalMaplntensity 的 属性 : 


NormalMaplntensity("Normal intensity", Range(0,1}) = 二 


将 解压 之 后 的 法 线 映射 的 x 和 y 均 乘 上 该 属性 之 后 作为 新 的 法 线 映 射 变量 的 x 和 y 值 : 


fixed3 n = UnpackNormal (上 ex2D ( BumpTex, IN.uv uv MainTex)) .上 gb ; 
n.x *= NormalMapIntensity; 
n.y *= NormalMapIntensity; 


oO.Normal = normalize (n).; 


Os 法 线 向 量 的 长 度 可 以 是 1， 这 里 乘 以 _ NotmalMapIntensity 之 后 会 改变 其 长 度 ， 必 要 的 时 候 需 要 处 理 一 下 数据 格 


现在 可 以 让 用 户 通过 材质 的 Inspector 标 签 页 调整 法 绪 映 射 的 光 强 了。 下 图 展示 了 不 同 光 强 下 法 线 映 射 的 效果 : 
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法 线 映 射 强 度 =0.1 法 线 映 射 强 度 =1 法 线 映 射 踢 度 =3 





2.7 ”创建 远 明 材质 


到 现在 为 止 ， 我 们 见 到 的 看 色 器 都 有 一 个 共同 点 一 都 用 在 实心 材质 上 。 如 果 你 想 提 升 游戏 视觉 效果 ， 某 毕 时 候 透明 材质 是 
个 不 铬 的 选择 ， 比 如 火焰 效果 或 者 窗户 玻璃 等 。 透 明 材 质 的 制作 相对 复杂 一 点 。 在 泻 染 实心 物体 之 前 ，Unity 会 按照 各 个 物体 距 


离 镜 头 的 距离 〈Z 排 序 ) 对 它们 进行 排列 ， 然 后 跳 过 所 有 没有 朝 关 镜头 的 三 角形 (剔除 ) 。 而 如 果 是 泻 染 透明 几何 体 ， 这 两 个 步 
又 可 能 融会 受 影响 。 这 一 节 我 们 会 讲解 在 创 建 透明 的 表面 着 色 器 时 如 何 解 决 这 些 可 能 出 现 的 问题 。 这 部 分 内 容 会 在 第 6 章 中 进 一 
步 回 顾 ， 因 为 到 时 候 需 要 模拟 玻璃 和 水 相关 的 场景 。 


2.7.1 ”准备 工作 


这 一 节 需 要 一 个 新 的 着 色 器 Transparent， 还 需要 一 个 新 的 材质 来 将 着 色 器 的 效果 呈现 到 物体 上 。 我 们 需要 做 一 个 透明 的 玻 
璃 窗 ， 最 好 准备 一 个 四 边 形 或 者 一 个 平面 。 还 需要 几 个 不 透明 的 物体 来 测试 透明 效果 。 在 这 个 例子 中 ， 给 玻璃 纹理 使 用 一 个 
PNG 图 像 ， 图 像 的 alpha 通 道 用 来 决定 玻璃 的 透明 度 。 创 建 这 样 一 个 图 像 需要 一 些 其 他 的 图 像 处理 软 件 。 你 需要 按照 下 面 这 些 步 
又 来 做 : 


1. 找 到 一 个 你 想 添加 给 玻璃 窗 的 图 像 。 

2. 用 图 像 编辑 软件 如 GIM P 或 者 Photoshop 打 开 该 图 像 。 
3. 在 图 像 中 选择 你 想 使 乙 半 透明 的 部 分 。 

4 .给 图 像 添加 一 层 白 色 遮 站 (完全 不 透明 ) 。 


5. 使 用 之 前 选择 的 内 容 以 及 一 种 比较 深 的 颜色 填充 庶 章 层 。 


6. 保 存 图 像 ， 然 后 将 其 导入 Unity。 


本 节 中 用 到 的 玩偶 图 像 是 一 个 彩色 玻璃 的 图 像 ， 来 自 于 法 国 的 葛城 大 教堂 
(https://en.wikipedia.org/wiki/Stained_glass) 。 如 果 你 是 按照 所 有 的 步骤 做 的 ， 那 么 你 的 图 像 应 该 看 起 来 如 下 面 所 显示 
(左边 是 彩色 的 RGB 通道 ， 右 边 是 半 透 明 通 道 ) : 





2.7.2 操作 步骤 


前 面 已 经 提 过 ， 人 在 使 用 透明 着 色 器 时 有 几 个 地 方 需要 注意 : 
1. 在 着 色 器 的 SubShader0 部 分 ,添加 下 面 的 标签 来 表示 着 色 器 是 一 个 透明 着 色 器 : 
Tags 


{ 


"Queue" = "Transparent" 
"IgnoreProjector" = "True" 


"RenderType" = "Transparent" 


| 
2. 因 为 着 色 器 是 用 二 维 材质 设计 的 ， 确 保 模型 背后 的 几何 体 是 没有 画 过 的 ， 代 码 如 下 : 


Cull Back 


3. 告 诉 着 色 器 材质 应 该 是 透明 的 ， 需 要 与 屏幕 上 之 前 画 好 的 东西 混合 在 一 起 - 


#pragma surface surf Standard alpha:fade 


4. 使 用 表面 着 色 器 来 计算 最 终 颜 色 和 玻璃 的 透明 度 : 


void Surt (Input IN, inout SurfaceOutputStandard o) 


{ 


float4 C = tex2D( MainTex; IN.uv MainTex) * Color:; 
DO.Albedo = ©&.rgb; 
SARLpna. SS Cal 


2.7.3 ”工作 原理 


这 个 着 色 器 引入 了 几 个 新 概念 。 首 先 Tags 是 用 来 添加 物体 的 泻 染 信 息 的 。 这 里 最 有 趣 的 部 分 是 Queue。Unity 默 认 会 根据 物 
体 到 镜头 的 距离 来 对 物体 进行 排序 ， 所 以 距离 镜头 近 的 物体 会 泻 染 在 距离 镜头 较 远 的 物体 之 上 。 在 大 部 分 情况 下 这 么 做 都 是 没有 

可 题 的， 但 在 某 些 时 候 你 想 要 自己 来 控制 这 个 排序 过 程 以 达到 有 某 种 需要 的 效果 。Unity 还 提供 了 某 些 默认 泻 染 序列 ， 序 列 中 的 每 
一 个 元 泰 包 含 一 个 唯一 的 序列 号 来 告诉 Unity 其 出 现 顺序 。 这 个 内 建 的 泻 染 序 列 称 为 背景 (Background) 、 几 何 结构 
(Geometry) 、alpha 检 查 (AlphaTest) 、 透 明 (Transparent) 和 覆盖 (Overlay) 。 这 些 序列 不 是 随便 创建 的 ， 设 置 这 些 
序列 是 为 了 让 开 友 着 色 器 和 实时 泻 染 的 过 程 更 加 简便 。 关 于 不 同 泻 染 序列 的 使 用 摘 述 ， 请 参照 下 表 : 


泻 染 序列 泻 染 序 列 描述 泻 染 序列 但 
i 这 个 泻 染 序 列 会 最 先 演 染 ,一 般 用 作 天 空 盒 或 者 其 他 
主导 (Background) Pp -| 1000 
大 的 环境 泻 染 
i z 这 是 个 的 认 的 这 染 序 列 ， 适 用 于 大 部 分 物体 ， 不 透明 
几何 结构 (Geometry ) - ; ee 2000 


几何 体 都 是 使 用 这 个 序列 
alpha 检查 几何 结构 使 用 这 个 序列 ， 与 几何 结构 序列 


alpha 检查 (AlphaTst) 不 同 的 是 ， 在 泻 染 完 了 所 有 实体 之 后 ,使 用 该 序列 在 泻 染 2450 
半 透 明 的 物体 时 更 加 蜗 效 
ee i 构 序列 和 alpha 检查 序列 之 后 
透明 (Transparent ) an 任何 混 色 是 看 色 疾 并 不 写 和 供 度 缓 存 ) 都 3000 
序 ei Ls Be [粒子 效果 
| 用 来 制作 入 谭 让 音效 果 的 ， 侍 何 最 后 泻 


“i 4000 
hy 这 个 厅 列 中 ， 比 如 镜头 光 雪 


入 新 (Overlay ) 





所 以 只 要 知道 了 物体 应 该 属于 哪个 泻 染 序列 ， 就 可 以 相应 地 指定 其 内 建 的 泻 染 序列 标签 。 我 们 的 着 色 器 使 用 Transparent 序 
列 ， 所 以 代码 是 这 样 的 : Tags{ “Queue” = “Trasparent”})。 


Os 事实 上 透明 序列 会 在 几何 结构 序列 之 后 泻 染 ， 但 是 并 不 是 说 玻璃 始终 会 出 现在 所 有 其 他 实体 之 上 。Unity 会 最 后 


绘制 玻璃 ,但 是 并 不 会 演 染 玻璃 上 那些 被 遮挡 住 的 像素 点 。 这 个 控制 是 通过 一 种 称 为 ZBuffering 的 技术 实现 的 。 关 于 模型 如 何 泻 
数 的 更 多 内 容 请 参考 http://docs.unity3d.com/Manual/SL-CullAndDepth.html。 


代码 中 的 lgnoreProjector 标 签 用 来 确保 该 物体 不 受 Unity 的 投影 影响 。 最 后 RenderType 扮 演 了 一 个 着 色 器 置换 的 角色 ， 关 


于 这 部 分 内 容 会 在 第 9 章 中 进一步 介绍 。 


最 后 一 个 概念 是 alpha: fade。 这 部 分 代码 表示 这 种 材质 上 的 每 一 个 像素 需要 与 屏幕 上 之 前 的 颜色 根据 其 alpha 值 进行 混 
色 。 如 果 没 有 这 个 指令 ， 像 素 会 按照 正音 的 顺序 显示 ， 但 是 不 会 有 任何 透明 效果 。 


2.9 打包 和 混合 纹理 


纹理 不 仅 在 仓储 许多 像素 颜色 数据 的 时 候 非 童 有 用 ， 同 时 还 可 以 用 来 仔 依 x 和 y 方 向 的 一 堆 像 素 集合 以 及 其 RGBA 通 道 。 可 以 
将 几 个 图 像 打 包 成 一 个 RGBA 纹 理 ， 然 后 通过 看 色 器 代码 来 提取 每 一 个 ，G，B，A 组 件 作为 单独 的 纹理 。 


将 几 个 独立 的 次 度 图 像 打 包 成 一 个 RGBA 纹 理 的 例子 如 下 图 所 示 : 





为 什么 要 打包 呢 ? 在 你 的 游戏 中 ， 纹 理 要 占据 一 大 部 分 的 存储 空间 。 但 是 如 果 能 将 多 个 纹理 打包 成 一 个 ， 殊 可 以 相当 程度 地 
减少 这 一 部 分 的 存储 空间 。 


任何 一 个 灰 度 纹理 都 可 以 打包 成 另外 一 个 彩色 纹理 的 RGBA 通 道中 的 一 个 。 这 个 说 法 可 能 刚 开始 听 起 来 有 点 难 懂 ， 但 是 在 这 
一 节 中 我 们 会 创建 一 个 使 用 打包 过 的 纹理 的 例子 。 


另外 一 个 可 能 需要 用 到 打包 纹理 的 场景 是 ， 你 想 把 数 种 纹理 混合 之 后 涂 在 一 个 表面 上 。 这 种 需求 通常 出 现在 地 形 类 的 着 色 器 
上 ， 此 时 你 往往 需要 很 好 地 将 数 种 纹理 混合 到 一 起 。 这 一 节 中 用 到 的 四 纹理 混合 地 形 着 色 器 可 能 会 对 你 有 所 帮助 。 


2.9.1 ”准备 工作 

首先 在 Shaders 文 件 夹 中 创建 一 个 新 的 着 色 器 文件 ， 然 后 为 该 着 色 器 创建 一 种 新 的 材质 。 命 名 规范 完全 取决 于 你 自己 ， 所 以 
可 以 自己 想 个 好 用 的 名 字 。 

准备 好 着 色 器 和 材质 之 后 ， 再 创建 一 个 场景 用 来 测试 着 色 器 。 


你 可 能 还 需要 准备 好 想 竟 合 到 一 起 的 四 种 纹理 。 可 以 随便 找 出 四 种 纹理 ， 但 是 要 想 让 地 形 看 起 来 酷 炫 的 话 ， 可 以 按照 草皮 、 
泥 士 、 碎 石和 石 块 准备 四 种 纹理 。 


本 节 例 子 中 用 到 的 纹理 可 以 在 本 书 附 市 的 资源 文件 中 找到 |。 


最 后 还 需要 一 个 用 来 打包 这 些 灰 度 图 像 的 混合 纹理 。 这 个 混合 纹理 中 混合 了 四 种 基础 纹理 ， 通 过 这 个 混合 纹理 我 们 可 以 清楚 
地 看 到 它 呈 现在 物体 表面 的 样子 。 


可 以 使 用 一 些 非常 复杂 的 混合 纹理 来 创建 一 些 非常 拟 实 的 地 形 来 ， 如 下 图 所 示 : 


MF» 


alpha 通 违 





2.9.2 操作 纱 又 


按照 下 面 的 步骤 来 理解 如 何 通 过 输入 代码 来 使 用 打包 的 纹理 : 
.需要 给 Properties 代 码 块 添加 一 些 属性 。 需 要 5 个 sampler2D 纹 理 或 对 象 以 及 2 个 颜色 属性 : 
Properties 
ft 


MaanmnTiat ("DLTEONw Tut™, ROJO a (Lyi 


//AMdd the properties below so we can input all of our 


textures 

olort Tarraln Coalor A Colorm) = (lr. T} 
SOLorB: ("Torraln CoLoE B”, GOlL9EYy) = (和 ,1 BL) 
RTexture ("Red Channel Texture", 2D) = ""{)} 
GTexture ("Green Channel Texture", 2D) = ""{} 
BTexture ("Blue Channel Texture", 2D) = ""{)} 
ATexture ("Alpha Channel Texture", 2D) = 和 
BlendTex ("Blend Texture", 2D) = ""{)} 


| 
2. 然 后 需要 创建 Subshader0 代 码 块 ， 用 来 接受 在 Properties 人 到 块 中 创建 的 属性 的 值 : 


CGPROGRAM 
#pragma surface surf Lambert 


float4 MainTint; 
float4 ColorA; 
float4 ColorB; 
sampler2D RTexture,; 
sampler2D GTexture; 
sampler2D BTexture,; 
sampler2D BlendTex,; 
sampler2D ATexture,; 


3. 现 在 我 们 已 经 有 了 目 己 的 纹理 属性 ， 而 且 已 经 把 这 些 属性 值 传 给 了 SubShader( 遂 数 。 为 了 能 够 修改 每 种 子 纹理 的 成 分 比 
例 ， 需 要 修改 Input 结 构 ， 以 便 可 以 使 用 每 一 种 纹理 的 藤 入 比例 和 偏 移 参 数 : 


struct Input 

{ 
float2 uv RTexture; 
float2 uv GIexture; 
onta, Uy Bowbnres 
float2 uv ATexture; 
float2 uv BlendTex; 


}; 


4. 在 surf () 立 数 中 ， 得 到 纹理 信息 ， 然 后 将 其 存储 在 对 应 的 变量 中 ， 以 便 后 续 使 用 : 


//Get the Pixel data from the blend texture 

//we need a float 4 here because the texture 

//Will return R,G,B,and A or X,Y,Z, and W 

filoat4 blendData = tex2D( BlendTex, IN.uv BlendTex); 


//Get the data from the textures we want to blend 
float4 rTexData = tex2D!( RTexture, INuv RTexture).; 
float4 glexData = tex2D( GITexture; IN UV GIexture) ; 
float4 bTexData = tex2D( 

float4 aTexData = tex2D( 


Blexture, IN.uv Blexturel)s 
ATexture,: JN UV ATexture)> 


5. 使 用 lerp () 轴 数 来 将 纹理 混合 。 该 函数 接受 三 个 参数 ， 即 lerp (value: a，value: b，blend: c) 。lerp 闵 数 会 将 两 种 
纹理 按照 最 后 一 个 浮 点 数 参 数 指定 的 比例 进行 混合 : 


//No we need to contruct a new RGBA value and add all 
//the different blended texture back together 

float4 finalColor.; 

finalColor = lerp (rTexData, gTexData, blendData .9g).; 
finalColor = lerp (finalColor, bTexData, blendData.b). 


fijnalColor = lerp (finalColor, aTexData, 
blendData.a) ;finalColor.a = 1.0; 


6. 最 后 ， 将 混合 纹理 乘 以 颜色 嵌入 值 ， 然 后 使 用 红色 通道 来 判断 两 个 不 同 的 地 形 柑 入 颜色 应 该 在 哪里 : 


//AMdd on our terrain tinting colors 

float4 terrainLayers = lerp( ColorA,; ColorB, blendData.r); 
finalColor *= terrainLayers; 

fijnalColor = saturate (finalColor).; 


oAlbedo = finalColor;rgb * MainTints:srgb; 
S.Alpha Ss FinalColor. a 


芯 入 四 种 纹理 之 后 创建 出 来 的 地 形 如 下 图 所 示 : 





2.9.3 ”工作 原理 


这 里 看 起 来 义 有 了 几 行 新 代码 ， 但 是 混合 纹理 背后 的 原理 其 实 非 常人 简单 。 为 了 混合 纹理 ， ee 
lerp () 函数 。 通 过 这 个 函数 可 以 将 第 一 个 参数 和 第 二 个 参数 按照 第 三 个 参数 据 定 的 比例 进行 混合 : 


该 前 数 使 用 如 下 方式 线性 插 仁 : 
lerp(a.,b.f) [开本 二 :本 二 过 让 
这 里 的 a 和 b 是 问 量 或 者 标量 。f 参数 可 以 是 一 个 与 a 和 b 相同 类 型 的 标量 或 者 向 量 


所 以 ， 如 果 想 要 找到 1 和 2 之 间 的 中 间 值 ， 可 以 使 用 lerp () 尔 数 ， 并 且 将 第 三 个 参数 据 定 为 0.5， 这 样 lerp () 函数 融会 返 
回 其 中 间 值 1.5。 这 个 消 数 非常 适用 于 混合 纹理 的 场景 ， 因 为 每 一 个 RGBA 通 道 的 纹理 都 是 浮 点 型 的 数值 ， 范 围 是 0 到 1。 


在 着 色 器 中 ， 我 们 从 混合 纹理 中 取 一 个 通道 ， 的 () 立 数 的 输出 值 。 例 如 我 们 取 了 草皮 纹理 和 泥土 纹 
理 , 使 用 了 混合 纹理 中 的 红色 通道 ， 将 其 填充 到 lerp () 锐 数 。 通 过 这 种 万 式 表 面 的 每 一 个 像素 束 会 得 到 正确 的 混合 颜色 ，。 


下 图 展示 了 一 个 更 加 可 视 化 的 使 用 lerp () 函数 混合 的 例子 : 


ep 图 ， 国 ,， 0 和 


者 色 器 代码 只 是 使 用 了 混合 纹理 的 四 个 色 值 通道 以 及 所 有 的 颜色 纹理 来 创建 最 终 的 混合 纹理 。 最 后 的 纹理 可 以 作为 我 们 乘 以 
漫 反 射 光 照 的 基础 颜色 。 





























很 多 即时 战略 游戏 需要 通过 企 某 个 选 定单 位 周围 绘制 圆 环 来 显示 一 些 距 离 (比如 攻击 汽 围 、 移 动 距离 、 视 野 范 围 等 ) 。 如 果 
地 形 是 平整 的 ， 可 能 只 需要 在 四 边 形 上 男 一 个 圆 形 纹理 丈 可 以 了 。 但 是 如 果 地 形 不 是 平 的 ， 则 四 边 形 可 能 会 被 一 些小 山 或 者 其 他 
几何 体 给 截断 。 这 一 书 中 你 会 学 到 如 何在 复杂 地 形 上 使 用 着 色 器 画 圆 环 。 如 果 还 想 移动 这 个 圆 环 ， 束 需要 一 个 着 色 器 和 一 些 C# 
脚本 。 下 图 是 一 个 在 由 一 推 小 山 构 成 的 地 形 上 画 出 圆 环 的 例子 : 















































这 个 技术 并 不 需要 对 场景 中 的 每 一 个 几何 体 进 行 操作 ， 而 是 针对 地 形 进 行 操作 。 因 此 第 一 步 需要 在 Unity 中 准备 一 个 地 形 。 


1. 首 先 创 建 一 个 名 为 RadiusSshader 的 着 色 器 和 一 个 名 为 Radius 的 材质 。 
2. 准 备 一 个 角色 ， 我 们 会 在 这 个 角色 周围 画 出 一 个 圆 。 
3. 从 菜单 中 选择 GameObject|3D Object|Terrain 来 创建 一 个 新 地 形 。 


4. 给 地 形 创建 一 定 的 几何 结构 。 可 以 导入 一 个 已 有 的 结构 或 者 使 用 工具 来 创建 一 个 新 的 (Raise/Lower Terrain，Paint 
Height, Smooth Height) 。 


5. 企 Unity 中 ， 地 形 是 一 类 特殊 的 对 象 ， 地 形 上 的 纹理 映射 也 和 传统 的 三 维 模型 上 的 纹理 映射 有 所 不 同 。 不 能 通过 看 色 器 提 
共 一 个 MainTex 纹 理 ， 因 为 地 形 需 要 自己 提供 纹理 。 步 又 是 选择 Paint Texture， 然 后 单 击 Add 
Texturehttp://www.hzcourse.com/resource/readBook? 


path=/openresources/teach ebook/uncompressed/16320/OEBPS/Text/...。 


让 WV Terrain 


Paint Texture 


Select a texture below, then click to paint 


BFUSES 


Textures 


No terrain textures defined. 


Add Texture,,, 


settings 

Brush Size 
OQpacity 

Target Strength 


罗网 Terrain Collider 

Material None (Physic Material) 
Terrain Data 只 New Terrain 1 
Enable Tree Colliders a 





6. 现 在 纹理 已 经 设置 好 了 ， 你 可 以 修改 地 形 的 材质 ， 通 过 这 个 材质 束 可 以 应 用 我 们 的 自 定 义 着 色 器 。 从 Terrain Settings 中 
修改 Material 属 性 为 Custom， 然 后 将 Radius 材 质 拖 蝶 到 Custom Material 栏 。 


现在 你 残 可 以 开始 创建 看 色 器 了 。 


首先 编辑 RadiusShader 文 件 。 


1. 在 新 的 着 色 器 中 添加 如 下 四 个 属性 : 


Center("Center",: Veotor) = 《00909703 

Radius ("Radius"; Fl6at) = 0:5 

RadaiusColor ("Radius Color"s Color) = 1 0s0:l) 
RadiusWidth ("Radius Width", Float) = 2 


2. 在 CGPROGRAM 部 分 添加 相应 的 变量 : 


float3 Center; 
float Radius; 
fixed4 RadiusColor; 
float RadiusWidth; 


3. 表 面 溺 数 的 Input 结 构 不 仅 需 要 纹理 的 UV 值 ， 还 需要 地 形 上 每 个 点 的 位 置 (在 世界 坐标 下 ) 信息 。 可 以 通过 修改 Input 结 
构 来 获得 这 个 参数 : 


struct Input 
float2 uv MainTex; // The UV of the terrain texture 
float3 worldPos:; // The in-world position 


bs 


4. 最 后 使 用 这 个 表面 销 数 : 


void surf (Input IN, inout SurfaceOutputStandard 0o) 
t 
float d = distance( Center, IN.worldPos).; 
if (da > Radius && d < Radius + RadiusWidth) 
oO.Albedo = RadiusColor; 
else 


SAlbedo = tex2D!( MainTex,; IN MainTex) .rgb; 


以 上 这 些 就 是 在 地 形 上 男 圆 环 所 需要 的 所 有 步骤 。 你 可 以 使 用 材质 的 Inspector 标 签 页 来 修改 圆 环 的 位 置 、 半 径 和 颜色 ，。 
移动 圆 环 

如 果 想 要 圆 环 跟着 角色 走 ， 还 需要 其 他 一 些 必 要 的 步骤 : 

1. 创 建 一 个 新 的 名 为 Radius 的 C# 脚 本 。 


2. 给 该 脚本 添加 如 下 属性 : 


public Material radluSsSMateLr1Ial 
BeaslG 二 GE YaduB. = 王 


PublIG CeLeE EGG = COlor:white 


3. 在 Update () 万 法 中 ， 添 加 下 面 几 行 代 码 : 


transform.position)., 


radiusMaterial .SetVector(" Center", 
radiusMaterial.SetFloat(" Radius", radius).; 
radiusMaterial .SetColor(" RadiusColor", color); 


4. 将 脚本 添加 到 角色 上 。 
5. 最 后 将 Radius 材 质 拖 暇 到 脚本 的 Radius Material 栏 。 


现在 可 以 把 你 的 角色 到 处 移动 一 下 ， 这 个 脚本 始终 会 在 你 的 角色 周围 创建 一 个 漂亮 的 圆 环 。 修 改 Radius 脚 本 的 属性 也 会 改 


变 圆 环 的 半径 。 


2.10.3 ”工作 原理 

绘制 圆 环 需要 的 元 素 有 圆心 、 半 径 和 颜色 。 在 痢 色 器 中 可 以 通过 Center、_Radius 和 _RadiusColor 分 别 得 到 。 我 们 通过 在 
Input 结 构 中 添加 worldPos 变 量 来 请 求 当 前 绘制 的 像素 在 世界 坐标 中 所 处 的 位 置 。 世 界 坐 标的 位 置 也 是 物体 在 编辑 器 中 的 真实 位 
置 。 


了 一 公 


surf () 冰 数 是 真正 绘制 圆 环 的 地 方 。 它 会 计算 绘制 点 到 圆心 的 距离 ， 然 后 判断 该 距离 是 否 属于 Radius 到 
_Radius+_RadiusWidth 汉 围 内 ， 如 果 在 这 个 范围 内 ， 残 使 用 选 定 的 赢 色 ; 如 果 不 在 这 个 泡 围 内 ， 残 像 我 们 见 到 过 的 其 他 寿 色 器 


一 样 直接 采样 纹理 映射 的 颜色 。 


第 3 章 ”理解 光照 模型 


在 前 一 草 中 ， 我 们 引入 了 表面 着 色 器 ， 并 且 和 解释 了 如 何 通 过 修改 物理 属性 来 模拟 不 同 的 材质 〈 比 如 反射 率 和 遍 光 等 ) 。 那 么 


这 些 设 置 到 底 是 如 何 生效 的 呢 ” 表面 着 色 器 的 核心 是 其 光照 模型 。 光 照 模型 是 一 个 用 这 些 属性 来 计算 每 个 像素 点 上 的 最 终 着 色 的 


数 。 Unity 通 单 会 对 开 友 者 隐藏 这 些 函 效 ， 因 为 编写 光照 模型 需要 理解 很 多 与 光照 相 天 的 概念 ， 比 如 光绪 企 表面 的 反射 和 折射 
等 。 本 章 会 讲解 光照 模型 是 如 何 工 作 的 ， 也 会 给 你 提供 一 些 目 定义 光照 模型 的 基础 知识 。 


在 这 一 草 中 ， 你 会 学 到 如 下 内 容 : 
` 创建 自 定义 的 漫 反射 光照 模型 
创建 卡通 着 色 器 
“ 创建 汉 氏 反射 类 型 光照 模型 
` 创建 BlinnPhong 反 射 类 型 光照 模型 


: 创建 各 向 异性 反射 类 型 光照 模型 


模拟 光照 过 程 是 一 个 非常 有 挑战 性 并 且 耗 时 耗 力 的 事情 。 多 年 以 来 ， 视 频 游 戏 都 是 使 用 非常 简单 的 光照 模型 ， 这 种 粗 务 的 光 
照 模型 尽管 有 些 失真 ， 但 是 已 经 足够 了 。 即 便 今 时 今日 的 很 多 三 维 引 擎 都 在 使 用 基于 物理 基础 的 泻 染 ， 在 某 些 简单 扩 术 上 也 仍然 
在 不 断 探 索 中 。 比 如 这 一 章 中 将 要 着 重 介 绍 的 光照 模型 束 是 这 样 一 种 在 很 多 低 洱 设备 (比如 手机 ) 上 采用 的 合理 的 拟 实 方式 。 理 
解 这 些 简单 的 光照 模型 对 于 帮助 你 创建 自己 的 光照 模型 大 有 神 葵 。 


3.2 ”创建 自 定义 的 漫 反射 光照 模型 


如 果 你 对 Unity 4 很 熟悉 ， 束 应 该 知道 默认 看 色 器 是 基于 一 种 名 为 朗 但 反射 的 光照 模型 创建 的 。 这 一 节 中 我 们 会 介绍 如 何在 
着 色 器 中 使 用 一 个 目 定 义 的 光照 模型 ， 并 且 还 将 解释 光照 模型 背后 的 数学 计算 和 实现 万 式 。 下 图 展示 了 一 个 相同 的 几何 体 用 标准 
着 色 器 ( 右 侧 ) 和 朗 但 反射 ( 左 侧 ) 泻 染 的 效果 图 。 





基于 衣 伯 反射 的 着 色 器 称 为 非 真 实感 着 色 器 ， 因 为 物理 世界 的 真实 物体 不 会 看 起 来 像 这 样 。 但 是 朗 伯 着 色 器 却 较 多 地 应 用 在 
一 些 低级 洲 戏 中 ， 因 为 它们 会 在 复杂 的 几何 体 表面 产生 明显 的 对 比 。 用 来 计算 朗 伯 反映 的 光照 模型 也 非常 高 效 ， 这 也 是 此 种 类 型 
的 着 色 器 广泛 应 用 在 资源 不 够 充足 的 手 游 上 的 原因 之 一 。 


Unity 已 经 提供 了 一 个 光照 立 数 ， 我 们 可 以 给 着色 器 使 用 这 个 光照 辫 数 。 这 个 消 数 称 为 朗 伯 光 照 模 型 ， 它 是 一 种 非常 基础 而 
又 高 效 的 反射 形式 ， 在 今天 市 面 上 的 游戏 中 你 都 能 找到 它们 的 存在 。 因 为 它 已 经 内 建 在 Unity 的 表面 着 色 器 语言 中 ， 所 以 最 好 是 
从 表面 着 色 器 开始 然后 在 此 基础 上 构建 我 们 上 自己 的 光照 模型 。 你 也 可 以 在 Unity 的 参考 手册 中 找到 一 个 介绍 光照 模型 的 例子 ,但 
是 这 里 的 讲解 比 那 个 例子 要 深入 得 多 ， 具 体 到 数据 是 从 哪里 来 的 以 及 为 什么 它 能 正常 工作 等 。 这 些 知 识 会 帮助 你 快速 建立 目 己 的 
光照 模型 ， 以 便于 后 续 草 市 的 学 习 。 


3.2.1 “准备 工作 


按照 下 面 的 步骤 开始 准备 : 


1. 创 建 一 个 新 的 着 色 器 并 对 其 进行 命名 。 


2. 创 建 一 个 新 的 材质 并 命名 ， 将 该 材质 的 着 色 器 属性 指定 为 新 建 的 着 色 器 。 


3. 然 后 创建 一 个 球体 ， 将 其 授 放 在 场景 的 正中 央 。 


4. 最 后 创建 一 个 平行 光 光 源 ， 然 后 将 一 些 光 投 射 到 物体 上 。 


当 在 Unity 中 准备 好 这 些 资 源 之 后 ， 你 的 场景 应 该 看 起 来 和 下 面 差不多 : 





明 伯 反射 可 以 通过 下 面 的 步骤 实现 : 


1. 给 着 色 器 的 Properties 代 码 块 添加 如 下 属性 : 


-MainTex("Texture", 2D) = "white" 


2. 修 改 荐 色 器 的 #pragma 指 令 ， 让 其 使 用 我 们 目 定 义 的 光照 模型 而 不 是 默认 的 Standard: 


#pragma surface surf SimpleLambert 


3. 使 用 一 个 非常 仿 单 的 表面 函数 ， 这 个 遂 数 只 是 通过 UV 值 采样 纹 理 : 


void surf (Input IN, inout SurfaceOutput o) |{ 
Oo.Albedo = tex2D( MainTex, IN.uv MainTex) .rgb; 


| 


.添加 一 个 名 为 LightingSimpleLambert () 的 阔 数 来 实现 明 介 反射， 代码 如 下 : 


half4 LightingSimpleLambert (SurfaceOutput s, half3 
lightDir, half atten) { 
half NdotL = dot (s.Normal, lightDir).; 
half4 c; 
CrgbB = .Albedo * LightColorQ.rgb * (NdotL * atten * 
13 3 
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3.2.3 ”工作 原理 


第 1 章 中 我 们 已 经 讲 过 ，#pragma 指 令 是 用 来 指定 着 色 器 需要 使 用 的 表面 函数 的 。 选 择 一 个 不 同 的 光照 模型 的 工作 原理 也 是 
一 样 的 : 当 我 们 指定 了 光照 模型 为 SmpleLambert 的 时 候 ，Cg 会 去 查找 一 个 名 为 LightingSimpleLambert () 的 函数 。 注 意 前 
面 的 Lighting 在 指令 中 被 省 略 。 


光照 阔 数 接受 三 个 参数 : 表面 输出 (包含 反照 率 、 透 明度 等 物理 属性 ) 、 光 照 方向 和 衰减 程度 。 


根据 明 伯 反射 ， 表 面 反 射 的 光照 量 取决 于 光线 入 射 方向 和 表面 法 线 之 间 的 夹 角 。 如 果 你 玩 过 桌球 ， 应 该 对 这 个 概念 很 融 悉 : 
桌球 在 桌面 边缘 碰撞 时 的 反射 路 径 取 决 于 其 入 射 角 。 如 果 你 的 入 射 角 为 90 度 (垂直 于 边缘 ) ， 那 么 球 碰 到 边缘 之 后 会 沿 原来 路 
径 滚 回来 ， 反 过 来 说 ， 如 果 角 度 很 小 ， 那 么 球 的 滚动 方向 只 会 偏 移 一 点 点 。 衣 伯 模 型 也 是 基于 同样 的 假设 : 如 果 光 照 是 沿 着 90 
度 角 垂直 入 射 在 表面 上 ， 则 所 有 的 光线 都 会 原 路 反射 回去 ， 而 随 着 这 个 角度 逐渐 变 小 ， 反 射 回来 的 光绪 就 越 少 。 这 个 原理 可 以 用 
下 图 表示 : 





这 个 简单 的 原理 需要 转换 成 数学 计算 形式 。 在 向 量 代 数学 中 ， 两 个 单位 向 量 之 间 的 夹 角 可 以 通过 其 点 积 操作 计算 得 到 。 如 果 
扣 积 为 0， 则 表示 两 个 向 量 完全 下 和 直 ， 也 束 是 二 者 来 角 为 90 度 ;而 如 果 操 积 为 1 (或 者 -1) ， 则 表示 二 者 相互 平行 。Cg 有 一 个 
dot () 水 数 实现 了 对 点 积 的 计算 。 


下 图 展示 了 光源 (比如 说 太阳 ) 照射 在 复杂 表面 时 的 场景 。! 表 示 光 的 方向 (在 着 色 器 中 名 为 lightDir) ，N 表 示 表 面 法 线 。 
光绪 在 表面 反射 时 的 反射 角 等 于 其 入 射 角 : 





明 伯 反射 残 是 将 NdotL 点 积 作为 乘法 因子 来 计算 光 强 的 : 
I=N . 工 


当 N 和 |L 平 行 时 ， 所 有 的 光 都 被 反射 回 了 光源 ， 让 几何 体 看 起 来 更 加 明亮 。_LightColor0 变 量 保存 的 束 是 计算 之 后 的 光照 颜 
色 。 


Os 在 Unity 5 之 前 ， 光 强 计算 是 不 同 的 。 如 果 使 用 的 是 一 些 老 的 基于 妆 伯 模型 的 漫 反 射 着 色 器 ， 你 会 发 现 NdotL 是 乘 
以 2 (NdotL#attenk2) ， 而 不 是 NdotLxatten。 如 果 你 是 从 Unity 4 导入 的 自 定义 着 色 器 ， 则 需要 手动 修复 这 个 部 分 ， 而 如 果 是 老 的 


内 建 着 色 器 ， 那 么 Unity 会 自动 更 正 这 一 部 分 。 


如 果 点 积 计算 出 来 的 是 负数 ， 也 残 意味 着 光照 是 从 三 角形 的 另外 一 面 过 来 的 ， 对 于 非 透 明 几 何 体 这 不 是 什么 问题 ， 因 为 这 种 
三 角形 压根 残 没 有 对 着 镜头 ， 因 此 会 被 过 滤 挥 而 不 会 被 泻 染 。 


如 果 你 想 尽 可 能 地 从 本 质 上 上 自 定义 一 个 着 色 器 ， 则 基础 朗 伯 光 照 是 一 个 不 错 的 起 点 。 使 用 衣 伯 反射 你 完全 不 用 担心 基础 光照 


Unity 已 经 给 我 们 提供 了 一 个 创建 朗 伯 光照 的 光照 模型 。 查 看 Unity 安 装 目录 下 的 Data 文 件 夹 中 的 UnityCG.cginc 文 件 ， 就 会 
找到 这 些 朗 伯 和 BlinnPhong 光 照 模型 。 在 使 用 #pragma surface surf Lambert 编 译 着 色 器 代码 时 ， 是 在 告诉 着 色 器 使 用 Unity 
实现 的 放 在 UnityCG.cginc 文 件 中 的 朗 伯 光照 函数 ， 这 样 我们 就 不 用 一 遍 一 遍地 重 写 这 些 代码 了 。 我 们 会 在 本 章 后 续 部 分 进一步 
探讨 BlinnPhong 模 型 是 如 何 工 作 的 。 


3.3 ”创建 卡通 有 有 色 器 


卡通 着 色 (toon shading) 是 游戏 中 一 种 非常 常见 的 特效 ， 又 称 为 卡通 泻 染 (cel shading，cel 是 英文 单词 celluloid 的 缩 
写 ) 。 它 是 一 种 非 拟 实 的 演 染 技术 ， 可 以 让 三 维 模型 看 起 来 平滑 。 很 多 游戏 通过 使 用 卡通 着 色 来 突出 图 像 是 手绘 的 ， 而 不 是 三 维 
建 模 的 。 通 过 下 面 这 个 图 你 可 以 看 到 用 卡通 着 色 器 ( 左 图 ) 和 标准 着 色 器 ( 右 图 ) 所 演 染 出 来 的 球体 的 细微 区 别 : 





其 实 要 得 到 这 种 效果 ， 只 需要 使 用 表面 溺 数 束 可 以 了 ， 但 是 这 人 么 做 的 话 代 价 太 过 昂贵 ， 也 会 影响 六 戏 性 能 。 表 面 消 数 实质 上 
只 会 在 材质 的 属性 上 起 作用 ， 而 不 会 考虑 材质 真实 的 光照 条 件 。 因 为 卡通 着 色 需 要 改变 光线 反射 路 径 ， 所 以 需要 创建 一 个 我 们 目 
己 的 光照 模型 。 


3.3.1 ”准备 工作 


首先 创建 一 个 着 色 器 和 它 的 一 个 材质 ， 然 后 导入 一 个 特殊 的 纹理 ， 步 又 如 下 : 
1. 创 建 一 个 新 着 色 器 ， 在 这 个 例子 中 ， 使 用 前 一 节 中 做 好 的 束 可 以 了 。 
2. 给 着 色 器 创建 一 种 新 的 材质 ， 并 且 将 材质 指定 给 某 个 三 维 模 型 。 卡 通 着 色 较 多 应 用 在 弧 形 表面 上 。 


3. 这 一 节 需 要 一 个 额外 的 纹理 ， 名 为 ramp map (坡度 图 ) 。 很 重要 的 一 点 是 ， 需 要 将 其 Wrap Mode 换 成 Clamp。 如 果 想 
让 颜色 之 间 的 边缘 变 得 锋利 些 ， 则 Filter Mode 应 该 设置 为 Point。 


上 


3.3.2 ”操作 步骤 





按照 下 面 的 步骤 焉 能 做 出 卡通 风格 的 着 色 器 : 
1. 添 加 一 个 名 为 RampTex 的 纹理 的 新 属性 : 


_RampTex ("Ramp", 2D) = "white" {} 
2. 企 CGPROGRAM 部 分 添加 对 应 的 变量 : 
sampler2D RampTex; 
3. 修 改 #pragma 指 令 来 让 其 指向 一 个 名 为 LightingToon () 的 函数 : 


#pragma surface surf Toon 


4. 使 用 下 面 的 光照 模型 : 


fixed4 LightingToon (SurfaceOutput s, fixed3 lightDir, 
fixed atten) 


{ 


half NdotL = dot (Ss Nomalil,;, 19htDir):; 
NdotL = tex2D{ RampTlex, tixed2 (Ndotb, 0.5))'; 


fixed4 c; 
Crgb = :Albedo * LightColor0O.rgb * Ndotb * attern; 
c.a = S.Alpha; 


Peturn. Qs 


3.3.3 ”工作 原理 


卡通 着 色 的 主要 特点 是 光 的 泻 染 方式 : 在 卡通 着 色 中 ， 表 面 并 不 是 均匀 泻 染 的 。 为 了 达到 这 个 效果 ， 需 要 一 个 坡度 图 ,目的 
是 通过 圾 大 图 来 将 明 但 反射 的 光 强 NdotL 重 新 映射 成 一 个 别 的 值 。 使 用 一 个 没有 梯度 的 圾 大 图 ， 可 以 让 光照 强制 呈现 阶梯 状 。 下 
图 便 是 为 了 修正 光 强 而 使 用 的 坡度 图 : 





3.3.4 ”更 多 内 容 


实现 卡通 着 色 特 效 的 万 式 非 党 多 ， 使 用 不 同 的 坡度 可 以 做 出 不 同 的 卡通 外 观 来 。 你 可 以 多 试 试 以 找到 目 己 最 喜欢 的 那 一 种 。 


另外 一 种 制作 坡度 纹理 的 方式 是 截断 光照 强度 NdotL， 让 其 只 返回 0 到 1 之 间 等 值 采样 的 某 些 离散 值 : 


half4 LightingCustomLambert (SurfaceOutput s, half3 lightDir, 
half3 viewDir, half atten) f{ 


half NdotL = dot (s.Normal, lightDir).; 


half cel = floor(NdotL * CelShadingLevels) / ( CelShadingLevels 
-0.5); // Snap 


half4d cc; 
CD ss SALbedo * Dighteolor0 ,rgb * eel * attens 


上 = LDha: 


et ws 


| 


截断 代码 将 NdotL 乘 以 _CelShadingLevels 信 ， 然 后 将 其 取 整 为 一 个 整数 再 除 回来 。 通 过 这 人 么 做 cel 的 值 就 被 强制 设 成 
_CelShadingLevels 中 从 0 到 1 均匀 分 布 的 一 个 值 。 这 种 方式 不 需要 这 个 坡度 纹理 ， 并 会 让 每 一 层 的 颜色 完全 一 样 。 如 果 你 想 用 这 
种 方式 的 话 ， 记 得 给 着 色 器 添加 CelShadingLevels 属 性 。 


3.4 ”创建 汉 氏 反射 类 型 光照 模型 


物体 表面 的 反映 度 直观 的 伟 义 是 指 物体 有 多 闪 亮 。 在 着 色 器 世界 中 ， 这 种 类 型 的 特效 通常 被 称 为 基于 视 完 的 特效 。 这 是 因为 
要 在 着 色 器 中 得 到 拟 实 的 反光 效果 ， 需 要 引入 镜头 角度 或 者 用 户 朝 向 物体 表面 的 角度 。 最 基础 的 反射 类 型 是 冯 氏 反射 特效 。 冯 氏 
反射 是 基于 光照 方向 和 用 户 视 角 方 向 进行 计算 的 。 这 种 反射 类 型 非 党 划 见 ， 应 用 在 相当 规模 的 应 用 程序 中 ， 从 游戏 到 电影 特效 比 
比 丝 是 。 这 种 模型 并 不 是 最 拟 实 的 反射 模型 ,但 是 它 在 大 部 分 场景 下 都 能 做 出 极 大 程度 的 近似 效果 。 此 外 ， 如 果 物 体 离 镜 头 比较 
远 目 本 身 束 没 有 必要 用 一 些 非常 精确 的 反映 ， 那 么 这 也 是 着 色 器 反射 特效 的 一 种 非常 有 用 的 方式 。 


在 这 一 节 中 ， 我 们 会 介绍 如 何 通 过 在 表面 着 色 器 的 Input 结 构 中 使 用 一 些 新 参数 来 实现 一 个 着 色 器 的 按 顶 点 版 本 和 按 像 素 版 
本 。 我 们 会 看 到 二 者 的 区 别 ， 并 且 会 就 如 何 因 地 制 宜 地 使 用 这 两 种 方式 进行 讨论 。 


3.4.1 ”准备 工作 


开始 这 一 节 之 前 ， 先 执行 下 面 这 几 步 : 
1. 创 建 一 个 新 的 着 色 器 、 一 个 新 的 材质 和 一 个 新 的 物体 ， 并 进行 合理 的 命名 。 


2. 将 着 色 器 指定 给 材质 ， 将 材质 指定 给 物体 。 在 新 的 场景 中 添加 一 个 新 的 平行 光源 ， 这 样 我 们 一 边 编写 代码 ， 一 边 束 能 随时 
看 见 反 射 效果 了 。 


3.4.2 操作 步骤 


按照 下 面 的 步 又 来 完成 一 个 冯 氏 光照 模型 : 


1. 到 这 里 为 止 ， 你 可 能 已 经 看 出 操作 步骤 中 的 一 些 老 套 路 了 ， 但 是 我 们 还 是 喜欢 从 最 基本 的 部 分 开始 编写 着 色 器 : 属性 。 所 
以 首先 给 着 色 器 添加 下 面 这 些 属性 : 


Properties 


人 


De TREE Colorn ¥ 1,1 
MainTex ("Base (RGB)", 2D) = "white" {} 
‘SpecularColor ("Specular COLlor; Coleor}) = (1s1; 1;1) 
SpecPower ("Specular Power", Range(0,30)) = 1 


| 


2. 然 后 需要 确保 这 些 属性 对 应 的 变量 都 添加 到 了 SubShaderf} 代 码 块 中 的 CGPROGRAM 部 分 。 


float4 SpecularColor; 
sampler2D MainTex; 
float4 MainTint,; 


float SpecPower:; 


3. 现 在 需要 添加 我 们 的 目 定 义 光照 模型 ， 这 样 才能 计算 我 们 上 自己 的 冯 氏 反射 。 如 果 你 嘻 得 不 怎么 看 得 懂 也 没有 关系 ， 我 们 会 
在 工作 原理 中 未 行 讲解 这 些 代码 。 现 在 只 需 把 下 面 这 些 代码 添加 a 到 着 色 器 的 SubShader(0 消 数 中 殊 可 以 了 : 


fixed4 LightingPhong (SurfaceOutput s, fixed3 lightDir., 
half3 viewDir, fixed atten) 


{ 
// Reflection 
float Ndotb = dot (s.Normal, Li1ghtDir); 


float3 reflectionVector = normalize(2.0 * s.Normal * 
NdotL - lightDir).:; 


// Specular 


float spec = pow(max(0, dot (reflectionVector, viewDir)), 
_SPecPoweLr) ; 
float3 finalSpec = SpecularColor.rgb * spec; 


// Final effect 
fixed4 c; 


CLI9b = (S.Albedo * LightColord .rgb * max(0,.NdotL) * 
atten}) + ( LightColor0.rgb * finalSpec}):; 


Gd EE Aloha 
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4. 最 后 ， 需 要 告诉 CGPROGRAM 代 码 块 它 需 要 使 用 我 们 的 自 定义 光照 尔 数 而 不 是 内 建 的 。 只 需 如 下 修改 #pragam 状 态 : 


CPROGRAM 


#pragma surface surf Phong 


下 面 的 截图 是 使 用 我 们 目 定 义 的 反射 癌 量 之 后 的 目 定义 冯 氏 光照 模型 





到 现在 为 止 着 色 器 中 的 其 他 部 分 你 应 该 已 经 比较 束 秋 了， 下面 着 重 训 析 一 下 光照 阔 数 的 代码 。 

在 前 一 节 中 ， 我 们 使 用 的 光照 国 数 只 提供 光照 万 向 lightDir。 I 提供 了 一 大 堆 光 照 冰 数 ， 其 中 有 一 个 提供 视角 方向 
viewDir。 上 有 具体 内 容 可 以 参考 下 表 或 者 链接 ht ocs.unity3d.com/Documentation/Components/SL- 
SurfaceShaderLighting.html: 

不 依赖 视角 的 光照 函数 的 接口 声明 half4 你 选择 的 光照 函数 名 (SurfaceOutput s, half3 lightDir half atten): 
尔 选 择 的 光照 卫 数 名 (Sur s. 3 lig iT 
信赖 视角 的 光照 函数 的 接口 声明 half4 你 选择 的 光照 阴 数 名 (SurfaceOutput s, half3 lightDir, half3 


viewD1ir. half atten): 


在 这 一 节 中 ， 我 们 出 做 一 个 高 光 着 色 器 ， 所 以 需要 使 用 依赖 视角 的 光照 函数 结构 。 因 此 ， 必 须 这 样 写 


CPROGRAM 
#pragma surface surf Pong 


fixed4 LightingPhong (SurfaceOutput s, fixed3 lightDir, half3 viewDir, 
fixed atten) 


人 
Fy 


这 种 声明 会 告诉 着 色 器 我 们 想 创 建 自 己 的 基于 视角 的 着 色 器 。 这 里 请 务必 确保 光照 函数 名 与 声明 的 光照 函数 名 以 及 
#pragma 语 句 中 是 一 样 的， 否则 Unity 是 不 能 找到 你 的 光照 模型 的 。 


下 图 是 冯 氏 模型 的 示意 图 。 可 以 看 到 我 们 还 是 有 一 个 光照 方向 L (反射 方向 为 R) 和 法 线 方向 N， 跟 朗 伯 反射 模型 中 一 样 。 这 
里 唯一 的 区 别 是 多 了 一 个 V， 表 示 的 是 视角 方 同 。 
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冯 氏 模型 假设 反射 型 表面 最 终 的 光照 强度 取决 于 两 个 因素 : 漫 反 射 颜 色 和 光线 反射 值 ， 如 下 : 
I=D+S 

漫 反 射 部 分 D 仍 是 根据 明 伯 模型 计算 : 

D=N . 工 

而 反射 部 分 S 则 定义 如 下 : 

S= (R.V)P 


这 里 p 是 着 色 器 中 用 _SpecPower 定 义 的 反射 强度 。 唯 一 未 知 的 参数 是 R， 表 示 的 是 根据 法 线 方向 N 计 算 的 入 射 光 线 L 的 反射 
部 分 。 在 向 量 代数 学 中 可 以 用 下 面 的 公式 计算 得 到 : 


Rs2N NT) 二 上 


这 正 是 下 面 这 段 代码 的 计算 依据 : 


float3 reflectionVector = normalize(2.0 * s.Normal * NdotL - 
lightDar) s 


这 人 么 做 有 一 个 效果 束 是 让 法 线 方 向 朝 着 光线 方向 弯曲 ， 对 于 法 向 量 不 是 朝 着 光线 的 地 方 ， 通 过 这 个 转换 可 以 强制 让 其 朝向 光 
线 方向 。 下 图 可 以 看 到 一 个 更 加 直观 的 示例 。 创 建 这 种 调试 效果 的 脚本 包含 在 本 书 的 帮助 页 面 中 ， 详 情 请 
Whttps://www.packtpub.com/books/content/support, 





下 图 展示 了 在 着 色 器 中 使 用 冯 氏 反射 计算 得 到 的 最 终 效 果 图 : 
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Blinn 是 另外 一 种 高 效 计 算 和 模拟 高 光 的 方式 ， 它 是 通过 视角 方向 和 光线 方向 构成 的 半角 向 量 来 完成 的 。 它 是 由 Jim Blinn 引 
入 Cg 世界 的 ， 因 此 以 该 友 明 人 的 名 字 进 行 了 命名 。 他 友 现 直接 使 用 半角 向量 而 不 用 人 为 计算 反射 向 量 的 万 式 更 加 高 效 。 这 样 一 
来 既 可 以 减少 代码 量 ， 也 可 以 提高 代码 执行 效率 。 如 果 你 看 过 UnityCG.cginc 文 件 中 内 建 的 BlinnPhong 光 照 模 型 ， 就 会 发 现 它 
使 用 的 就 是 半角 向 量 ， 这 也 是 它 被 命名 为 BlinnPhong 的 原因 。 简 而 言 之 ， 可 以 将 这 种 光照 模型 理解 为 完整 双 氏 计算 的 一 种 简化 
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开始 这 一 节 之 前 ,按照 下 面 的 步骤 做 好 准备 工作 : 


1. 这 次 不 用 创建 一 个 全 新 的 场景 ， 用 已 有 的 物体 和 场景 融 好 了 ， 然 后 创建 新 的 材质 和 着色 器 ， 并 命名 为 BlinnPhong。 


2. 创 建 了 新 的 着 色 器 之 后 ， 双 击 着 色 器 打开 默认 的 MonoDevelop 编 辑 器 ， 就 可 以 准备 开始 写 代 码 了 。 


一 ~ 二 号 //—-| 人 一 站 再 
LL J) Tb MM pa pa 
有 Ta EP my 一 
e wl © 人 一 | KE A 2 
J = 7 





按照 下 面 的 步骤 来 创建 BlinnPhong 光 照 模型 : 
1. 首 先 在 Properties 代 码 块 添加 一 些 我 们 需要 用 到 的 属性 ， 通 过 这 些 属性 可 以 控制 高 光 模 型 的 显示 效果 : 


Properties 


{ 


Manlangt (“Diftues Tint”, Solore) Se (LL, 1 
MainTex ("Base (RGB)", 2D) = "white" {} 
SpecularColor (Specular Color"”; Color) = (1;1s1,1) 
SpecBPower ("Specular Power", Range(0.1,.680)} ss 3 


2. 然 后 需要 确保 在 CGPROGRAM 代 码 块 创建 了 对 应 的 变量 ， 通 过 这 些 变量 我 们 能 在 子 着 色 器 中 访问 Properties 代 码 块 中 属 
性 的 信 : 


sampler2D MainTex; 
float4 MainTint.,; 
float4 SpecularColor; 
float SpecPower:; 


3. 现 在 是 时 候 创建 我 们 的 自 定义 光照 模型 了 ， 这 个 光照 模型 会 计算 对 应 的 漫 反 射 和 高 光 部 分 ， 代 码 如 下 : 


fixed4 LightingCustomBlinnPhong (SurfaceOutput s, fixed3 
lightDir, half3 viewDir, fixed atten) 


人 


float Ndotb = max(0 dot(ssNormal; lJ19g9htDir})})s 


float3 halfVector = normalize (1ightDir + viewDir).; 
float NdotH = max(0, dot(s.Normal, halfVector)): 
float spec = pow(NdotH, SpecPower) * SpecularColor; 


float4 c; 
GC.rgb = (Ss:Albedo * LightColor0O -rgb * NdotL) + 
( LightColord .rgb * SpecularColor .rgb * Spec}) * attens 


Ga = BAlpha; 


return CC: 


4. 要 完成 着 色 器 的 编码 ， 告诉 CGPROGRAM 代 码 块 使 用 我 们 的 自 定义 光照 模型 而 不 是 内 建 的 光照 模型 ， 其 操作 步 又 
是 如 下 修改 #pragma 语 人 句 : 


CPROGRAM 
#pragma surface surf CustomBlinnpPphong 


下 图 展示 了 使 用 刚刚 创建 的 BlinnPhong 光 照 模型 之 后 的 效果 图 : 





BlinnPhong 高 光 和 冯 氏 高 光 基 本 上 磊 不 多 ， 只 是 做 了 一 些 简化 之 后 更 加 高 效 去 了 ， 因 为 BlinnPhong 做 了 某 些 近似 之 后 代码 
变 少 了 。 在 引入 基于 物理 基础 的 泻 染 技术 之 前 ， 在 Unity 4 中 这 种 光照 模型 便 是 默认 的 高 光 反 射 模型 。 


计算 反射 向量 R 的 代价 比较 昂贵 ， 因 此 在 BlinnPhong 局 区 中 将 R 直 接著 换 为 视角 万 向 V 和 光绪 方向 [之 间 的 半角 同 量 H。 





在 这 里 我 们 并 不 计算 反射 癌 量 ， 而 是 直接 计算 视角 方向 与 光 续 方向 乙 间 的 角 平 分 线 来 模拟 反射 癌 量 。 事 实 上 这 种 方式 比 上 一 
种 在 物理 上 更 加 精确 ， 但 是 我 们 总 得 还 是 有 必要 展示 一 下 其 所 有 的 可 能 性 : 


三 (R V) Ds SBlinnPhong™= (N H) D 


通过 向 量 代数 学 计算 ， 半 和 角 同 量 可 以 通过 下 面 的 公式 计算 得 到 |: 
二 

H 
上 起 主公 





这 里 |V+L| 是 向 量 V+L 的 长 度 。 在 Cg 中 ， 只 需要 将 视线 万 向 和 光线 方向 蔷 加 之 后 归 一 化 成 一 个 单位 向 量 束 可 以 了 : 


float3 halfVector = normalize (lightDir + viewDir); 


然后 只 需 计算 项 点 法 向 量 和 新 得 到 的 半角 向 量 的 点 积 就 可 以 得 到 主要 高 光 值 。 做 完 之 后 ， 取 其 SpecPower 次 方 窜 并 乘 以 高 
光 颜 色 变量 就 可 以 了 。 这 种 光照 模型 在 代码 和 数学 计算 上 轻 量 了 很 多 ， 但 是 最 后 做 出 来 的 高 光 效 果 却 同样 出 色 。 


3.5.4 ”参考 


这 一 草 中 看 到 的 光照 模型 都 非常 信 单 ， 没 有 哪 一 种 真实 材质 是 完全 高 光 或 者 完全 不 有 反光 的 。 尤 其 像 衣 服 、 木 涉 和 皮肤 等 复杂 
材质 表面 ， 光 线 甚 至 可 以 部 分 进入 表面 之 下 的 部 分 中 。 


下 表 总 结 了 我 们 碰 到 的 所 有 不 同类 型 的 光照 模型 





技 术 类 | Unity 5 者 色 独 沦 强 (了 7) 
明 介 5 
T=N.I+(CR.F 
党 氏 wn E09 
R=2N(N:L)—L 
I=N:L+(N: HY 
BlinnPhoneg 簿 留 春 色 关 | 高 光 矿 十 工 
全 | 天 二 而 


此 外 还 有 很 多 其 他 非常 有 趣 的 光照 模型 ， 比 如 粗粮 表面 经 党 用 到 的 Oren-Nayar 光 照 模 型 : 


https://en.wikipedia.org/wiki/Oren%E2%80%93Nayar reflectance model 


3.6 ”创建 各 同 异性 反 快 类 型 泛 照 模型 


各 向 异性 是 一 种 模拟 物体 表面 沟 槽 方向 性 的 高 光 反 映 类 型 ， 它 会 修改 或 拉 伸 恰 直 方向 上 的 高 光 。 如 果 你 想 模 拟 金 属 拉丝 而 不 
是 一 个 清晰 、 光 滑 、 抛 光 的 金属 表面 ， 各 向 异性 高 光 是 非常 有 用 的 。 想 象 一 下 当 你 看 到 CD 或 DVD 记 录 数 据 的 那 一 面 ， 或 者 谈 或 
锅 的 底部 产生 的 高 光 形状 。 仔 细 观 察 你 会 友 现 ， 它 们 表面 的 一 些 沟 槽 是 沿 着 一 个 方向 的 ， 通 常 是 金属 拉丝 的 形式 。 当 在 这 种 表面 
使 用 高 光 效 果 时 ， 会 得 到 一 种 在 垂直 方向 上 拉 伸 了 的 局 区 效 果 。 


这 一 书 我 们 将 介绍 镜面 高 光 的 补充 概念 ， 通 过 这 种 补充 可 以 实现 不 同类 型 的 表面 拉丝 效果 。 在 后 面 的 教程 里 ,我们 将 学 习 如 
何 使 用 本 书 的 这 些 概念 来 实现 一 些 其 他 的 效果 ， 但 是 在 这 里 首先 要 明日 这 些 拉 术 的 基本 原理 。 我 们 将 使 用 下 面 这 个 着 色 器 作为 我 
们 目 定 义 的 各 向 异性 着 色 器 的 一 个 参考 : 


http://wiki.unity3d.com/index.php?title=Anisotropic Highlight Shader 


下 图 展示 了 在 Unity 中 使 用 各 向 异性 着 色 器 实现 的 不 同类 型 的 高 光 效 果 的 例子 : 


叫做 型 各 回 卉 性 水 平 各 问 寞 性 





3.6.1 ”准备 工作 


开始 这 一 节 之 前 ， 我 们 先 创建 一 个 着 色 器 以 及 其 对 应 的 材质 ， 然 后 在 场景 中 加 点 光 : 


1. 创 建 一 个 包含 一 些 物 体 和 光线 的 新 场景 这样 我 们 能 够 可 视 化 地 调试 着 色 器 。 


3. 最 后 需要 一 些 法 线 映射 图 ， 通 过 这 些 映射 图 来 指定 各 向 异性 镜面 高 光 的 方 同 性 。 


下 图 是 一 个 这 一 节 中 用 到 的 各 向 异性 的 法 线 映 射 图 ， 你 可 以 在 本 书 的 帮助 页 面 找 
到 : https://www.packtpub.com/books/content/support。 
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要 创建 各 向 异性 特效 ,需要 将 之 前 创建 好 的 着 色 器 进行 如 下 修改 : 


1. 首 先 给 着 色 器 添加 将 要 用 到 的 一 些 属性 。 通 过 这 些 属性 我 们 可 以 控制 最 终 的 外 观 效果 : 


Properties 
.MelnTint (“DIFELaSSe; TnG"; Color}y = (lalilil) 
"MainiTex: ("Base (RGB}™, 2D}) = whte" {} 
Specularcoleor ("specular COLGr",: CoOLOr) = (1;1y1,1) 
Specular ("Specular Amount” Range (071))} = 055 


SpgecPower: ("Bpeeoeular Power", Range(0,. Ly ss 0,5 
AnisoDir ("Anisotropic Direction", 2D) = "™ {} 
AnisoOffeset ("Anlisotropic Offset"; Range(-1;1)) = -0. 


| 


了 


2. 然 后 需要 将 Properties 代 码 块 中 定义 的 属性 和 SubShader{} 函 数 联系 起 来 ， 这 样 才能 使 用 Properties 代 码 块 中 提供 的 属性 
值 : 


sampler2D MainTex; 
sampler2D AnisoDir,; 
float4 MainTint; 
float4 SpecularColor; 
float AnisoOffset.,; 
float Speculars 


float SpecPower:; 
3. 现 在 可 以 创建 我 们 自己 的 光照 浮 数 了 ， 通 过 这 个 光照 立 数 可 以 制作 出 正确 的 各 同 异 性 效果 。 


fixed4 LightingAnisotropic(SurfaceAnisoOutput s, fixed3 
lijghtDir, half3 viewDir, fixed atten) 


{ 


fixed3 halfVector = normalize (normalize (lightDir) + 
normalize (viewDir)); 


float NdotL = saturate(dot(s.Normal, lightDir)); 


fixed HdotA = dot (normalize(s.Normal + s.AnisoDirection),, 
halfVector).; 


float aniso = max(0, sin(radians ( (HadaotA + AnisoOffset) * 
180) 


float spec = saturate(pow(laniso, s.Gloss * 128) * 
Ss.Specular).; 


fixed4 c; 

coop = ((S.Albedo * LightColor0 .rgb * NdotL) + 
( LightColor0.rgb * SpecularColeor.rgb > Spec})) * 
atten.; 


Ca = .AlLpha 
return cc; 


4. 为 了 使 用 这 个 新 的 光照 函数 ， 需 要 告诉 子 着 色 器 的 #pragma 语 句 使 用 我 们 自 定 义 的 光照 函数 而 不 是 内 建 的 ， 还 要 告诉 着 
色 器 使 用 着 色 器 模型 3.0， 这 样 我 们 在 程序 中 才能 有 更 多 的 纹理 空间 : 


CGPROGRAM 
#pragma surface surf Anisotropic 
#pragma target 3.0 


通过 在 Input 绪 构 体 中 声明 下 面 这 段 代 码 ， 我 们 也 给 出 了 各 向 异性 法 绪 映 射 图 目 身 的 UV 值 。 也 可 以 使 用 主 纹理 的 UV 值 ， 
但 是 通过 使 用 各 向 异性 法 线 映射 图 的 方式 ,我 们 可 以 目 主 控制 金属 拉丝 效果 的 平 铺 效果 ， 于 是 可 以 将 其 随心 所 欲 地 进行 缩放 ， 所 


struct Input 
float2 uv MainTex,; 
float2 uv AnisoDir; 


1 
6. 还 需要 添加 SurfaceAnisoOutput 结 构 : 


struct SurfaceAnisoOutput 


{ 


fixed3 Albedo; 

fixed3 Normal. 

fixed3 Emission.; 
fixed3 AnisoDirection.; 
half Specular; 

fixed Gloss.; 

fixed Alpha,; 


Fe 


7. 最 后 需要 使 用 surf () 函数 来 将 正确 的 数据 传递 给 光照 国 数 。 因 此 需要 通过 各 向 异性 法 线 映 射 图 得 到 每 个 像素 上 的 信息 ， 
然后 将 高 光 参 数 设置 成 下 面 这 样 : 


void Surf (Input IN, inout SurfaceAnisoOutput o) 


{ 


half4 & = tex2D( MaInTex，INU MainTex}) 本 MalniTinit; 


float3 anisoTex UnpackNormal (tex2D( AnisoDir, 


IN.uv AnisoDir)).,; 


.AnisoDirection = anisoTex; 
Specular = Specular; 
.Gloss = SpecPower; 
Albedo = © .rg 

-DNA: = 


Q OO OO © 总 


通过 各 向 异性 法 线 映 射 图 ， 可 以 给 表面 产生 一 个 磨砂 方向 ， 并 且 可 以 在 表面 形成 一 个 镜面 高 光 分 散 效 果 。 下 面 的 截图 是 使 用 
各 回 异 性 看 色 器 之 后 的 泻 染 效果 : 





我 们 可 以 将 这 个 着 色 器 分 解 成 几 个 核心 组 件 ， 并 且 展 开 和 解释 为 什么 会 得 到 这 样 的 效果 。 我 们 会 重点 讲解 目 定 义 光照 销 数 ,着 
色 器 的 其 他 部 分 你 应 该 已 经 比较 清楚 了 。 


首先 声明 了 SurfaceAnisoOutput 结 构 ， 这 是 因为 我 们 需要 从 各 向 异 性 法 线 映射 图 中 获取 每 个 像素 点 的 信息 ， 而 在 表面 着 色 
器 中 获取 法 线 映射 图 像素 信息 的 唯一 途径 就 是 在 surf () 锐 数 中 使 用 tex2D () 遂 数 。 下 面 这 段 代 码 束 是 我 们 在 着 色 器 中 使 用 的 
目 定义 表面 输出 结构 : 


struct SurfaceAnisoOutput 
{ 

fixed3 Albedo; 

fixed3 Normal; 

fixed3 Emission.,; 

fixed3 AnisoDirection; 

half Specular:; 

fixed Gloss ; 

fixed Alpha,; 


bs 


可 以 使 用 SurfaceAnisoOutput 绪 构 作 为 光照 图 数 和 surf () 国 数 交互 的 途径 。 在 这 里 ， 每 个 像素 的 纹理 信息 保 仓 在 
surf () 函数 中 的 一 个 名 为 anisoTex 的 变量 中 ， 然 后 通过 赋值 给 AnisoDirection 变 量 将 这 部 分 数据 传 给 SurfaceAnisoOutput 结 


构 。 完 成 这 些 之 后 ， 就 可 以 在 光照 函数 中 通过 s.AnisoDirection 使 用 这 些 像 素 信 息 了 。 


建 六 了 这 些 数据 之 间 的 联系 之 后 ， 我 们 看 看 真正 做 光照 计算 的 部 分 。 首 先 我 们 握 弃 了 传统 的 计算 方式 ， 使 用 的 是 半角 向 量 方 
法 ， 这 样 一 来 束 不 用 完整 地 计算 反射 和 散射 光 了 ， 而 只 需 计 算 项 点 法 线 和 光线 同 量 的 点 积 即 可 : 


fixed3 halfVector = normalize (normalize (1ightDir) + 
normalize (viewDir)).; 


float NdotL = saturate(dot(s.Normal, lightDir)); 


和 和 ， 对 两 者 之 和 进行 归 一 化 后 与 上 一 步 得 到 的 halfVector 进 行 点 积 运算 。 这 人 么 做 完 之 后 会 得 到 一 个 浮 点 数 ， 如 果 这 个 数 为 1 则 表 
示 物 体 表面 的 法 线 与 halfVector 平 行 ， 反 乙 ， 如 果 此 值 为 0 则 表示 二 者 相互 垂直 。 最 后 我 们 使 用 sin () 函数 来 处 理 这 个 值 ， 这 样 
基于 halfVector 残 能 得 到 一 个 中 间 是 深 色 的 高 光 圆 环 。 所 有 之 前 提 到 的 操作 可 以 总 结 为 如 下 两 行 Cg 人 代码: 


fixed HdotA = 
halfVector).; 
float aniso = 


dot (normalize(s.Normal + Ss.AnlisoDirection), 


max(0, sin(radians ( (HaotA + AnisoOffset) * 180))); 


最 后 ， 我 们 对 ansio 值 进行 放大 ， 方 式 是 对 其 进行 s.Gloss 次 方 的 窜 运 算 ， 然 后 再 乘 以 s.Specular 值 ， 在 全 局 范围 内 降低 其 强 


float spec = saturate(pow(aniso, s.Gloss * 128) * s.Specular).; 


这 种 各 向 异性 效果 非常 适合 制作 高 级 金属 型 表面 ， 尤 其 是 有 方向 性 拉丝 的 金属 表面 。 它 也 可 以 用 于 制作 头 友 或 者 其 他 有 万 同 
性 的 软 表面 。 下 图 是 各 向 异性 光照 计算 之 后 的 最 终 效果 : 





第 4 章 Unity 5 中 基于 物理 基础 的 泻 染 


Unity 5 中 引入 的 一 大 变化 是 基于 物理 基础 的 演 染 ， 又 称 为 PBR (Physically-Based Rendering) 。 前 面 的 章节 里 面 我 们 已 
经 多 次 提 到 了 这 个 概念 ， 但 是 一 直 没 有 展开 讨论 。 如 果 你 既 想 知道 基于 物理 基础 的 泻 染 是 怎么 工作 的 ， 又 想 把 这 个 技术 用 好 ， 那 


日 
AE 
么 这 一 章 束 非常 适合 你 。 
在 这 一 章 中 ， 你 会 学 到 如 下 内 容 : 
理解 金属 光泽 属性 
. 给 PBR 添 加 透明 度 
创建 镜面 和 反射 型 表面 


在 场景 中 添加 烘焙 光 


在 第 3 章 中 ， 我 们 对 页 到 的 所 有 光照 模型 的 工作 原理 都 进行 了 详细 的 解释 。 在 选择 光照 模型 的 时 候 一 个 很 重要 的 因素 是 其 泻 
染 效 率 。 实 时 着 色 的 代价 是 相当 昂贵 的 ， 而 像 朗 伯 或 者 BlinnPhong 等 光照 模型 其 实 是 计算 成 本 和 拟 实 性 之 间 的 一 个 妥协 。 而 如 
果 图 像 处 理 器 (GPU) 足够 强大 ， 我 们 束 可 以 使 用 一 些 更 加 精细 的 光照 模型 和 泻 染 引 掌 来 真正 计算 光线 的 实际 行为 了 。 简 单 来 
讲 ， 这 其 实 融 是 PBR 育 后 的 原理 。 顾 名 思 义 ， 基 于 物理 基础 的 泻 染 融 是 要 通过 泻 染 出 每 种 材料 独特 的 外 观 来 达到 尽 可 能 贴近 物理 
现实 的 泻 染 效果 。 除 此 之 外 ，PBR 这 个 概念 还 广泛 应 用 在 一 些 营销 活动 中 ， 作 为 一 种 顶尖 泻 染 拉 术 的 代名词 ， 而 不 是 我 们 这 里 谈 
到 的 有 明确 定义 的 技术 。Unity 5 通过 两 个 重要 的 变化 做 到 了 PBR。 第 一 个 变化 是 一 种 完全 全 新 的 光照 模型 (名 为 标准 光照 模 
型 ，Standard) 。 用 户 可 以 通过 表面 着 色 器 来 指定 材质 的 物理 属性 ， 但 其 实 这 样 并 没有 真 的 用 到 着 色 器 上 的 一 些 物 理 约束 。 
PBR 通 过 使 用 一 个 特殊 的 光照 模型 填补 了 这 个 缺口 。 这 个 特殊 的 光照 模型 整合 了 诸如 能 量 转 换 (物体 反射 的 花 比 接收 到 的 区 要 
多 ) 、 微 表面 散射 (粗糙 表面 比 光 滑 表 面 的 反射 更 加 无 规律 ) 、 菲 涅 尔 反 射 率 (在 扰 射 角 上 的 遍 光 反射 部 分 ) 、 表 面 吸 收 (漆黑 
的 角落 等 其 他 难以 被 照 亮 的 地 万) 等 物理 概念 。 除 这 几 个 物理 概念 之 外 ， 标 准 光照 模型 还 用 到 了 其 他 一 毕 物 理 概 念 来 完成 整个 计 
算 过 程 。 第 二 个 变化 是 全 局 照明 (Global lllumination，GI) ，Gl 是 一 种 模拟 物理 世界 中 光线 传播 的 技术 。 其 合 义 是 ,场景 中 
并 不 绘制 物体 ， 融 好 像 场景 和 物体 属于 两 个 不 同 的 实体 一 样 。 场 景 和 物体 会 影响 最 终 的 外 观 ， 因 为 光线 在 础 到 别 的 忒 西 乙 前 会 在 
它们 的 表面 被 反射 。 这 部 分 内 容 并 不 包含 在 着 色 器 中 ， 但 却 是 泻 染 引擎 中 最 为 核心 的 部 分 。 不 站 的 是 ， 完 全 真实 地 实时 模拟 光线 
如 何在 物体 表面 反射 所 需要 的 计算 量 即 使 是 现代 的 GPU 也 吃不消 。Unity 5 中 做 了 很 多 非 弟 聪明 的 优化 ， 以 做 到 在 确保 视 完 效果 
的 同时 不 会 牺牲 游戏 性 能 。 但 是 菏 些 非常 高 级 的 技术 (比如 反射 ) 在 使 用 的 时 候 是 需要 用 户 的 输入 的 。 在 这 一 章 中 ， 我 们 会 讨论 
所 有 这 些 内 容 。 很 重要 的 一 点 是 ， 要 记 住 PBR 和 GI 并 不 会 自动 让 你 的 游戏 美 轮 美 免 。 获 得 好 的 拟 实感 是 一 个 颇具 挑战 性 的 工作 ， 
跟 其 他 的 美工 一 样 ， 需 要 一 些 专业 的 超 剖 技 巧 。 


Unity 5 提供 了 两 种 类 型 的 PBR 着 色 器 ， 在 材质 的 Inspector 标 签 页 的 Shader 下 拉 荣 单 中 可 以 看 到 ， 分 别 是 standard 和 
Standard (Specular setup) 。 这 两 者 的 区 别 是 前 者 有 一 个 金属 光泽 (Metallic) 属性 ， 后 者 则 换 成 了 一 个 高 光 (Specular) 
属性 。 金 属 光泽 和 高 光 属 性 表示 的 是 初始 化 PBR 材 料 的 不 同方 式 。 驱 动 PBR 的 一 个 重要 概念 是 要 能 够 提供 一 些 有 意义 的 、 物 理 相 
关 的 属性 ， 美 工 和 开发 人 员 都 能 够 通过 这 些 属性 进行 一 些微 调 。 这 些 物理 相关 的 属性 中 ， 有 一 些 属性 可 以 描述 材质 的 金属 光泽 程 
度 ， 而 另外 一 些 属性 则 用 来 描述 材质 直接 反光 的 程度 。 如 果 你 之 前 用 过 Unity 4， 可 能 会 对 Standard (Specular setup) 比较 熟 
悉 一 些 。 这 一 节 我 们 会 教 你 如 何 高 效 地 使 用 金属 光泽 属性 。 首 先 需 要 记 住 的 很 重要 的 一 点 是 ， 金 属 光泽 属性 并 不 是 只 能 应 用 在 金 
属 材质 上 。 它 只 是 一 种 定义 金属 或 者 非 金属 材质 的 表面 光泽 效果 的 技术 ， 与 是 否 真 的 是 金属 材质 无 天 。 金 属 光泽 和 高 光 属 性 虽然 
是 两 种 不 同 的 类 型 ， 但 是 表现 力 其 实 是 差不多 的 。 详 情 可 参见 Unity 的 官方 文 
档 : http://docs.unity3 Manual/Stand jerMe pecular.html。 同 种 材料 用 两 种 不 同 的 方式 通常 都 可 以 实 
现 ( 见 下 图 ) 。 
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se rd le One 


这 一 节 我 们 会 用 到 Unity 5 提供 的 标准 着 色 器 ， 所 以 完全 没有 必要 再 新 建 一 个 ， 用 之 前 的 就 好 了 。 准备 步 又 如 下 : 
1. 创 建 一 个 新 材质 。 
2. 任 材质 的 Inspector 标 等 页 中 ， 确 保 Shader 下 拉 荣 单 中 选择 的 是 standard 项 。 


你 还 需要 一 个 有 纹理 的 三 维 模型 。 


4.2.2 ”操作 步骤 

有 两 个 主 纹理 需要 配置 到 标准 着 色 器 中 : Albedo 和 Metallic。 要 想 高 效 地 使 用 金属 光泽 属性 ， 需 要 正确 地 初始 化 这 些 映 
导 : 

1.Albedo 了 映射 应 该 使 用 三 维 模型 的 无 光 纹 理 进 行 初始 化 。 


2. 要 创建 Metallic 映 射 ， 可 以 先 拷贝 一 份 Albedo 上 映射 文件 ， 你 可 以 在 Project 标 等 页 中 选中 映射 文件 ， 然 后 按 Ctrl+D 快 捷 键 

3. 将 材质 所 在 地 方 的 地 图 刷 成 昌 色 ， 其 他 地 方 使 用 黑色 。 有 灰色 着 色 器 可 以 用 在 灰暗 表面 、 风 化 的 表面 、 磨 损 金 属 表 面 、 生 外 
表面 、 有 刊 痕 的 地 方 等。 事实 上 ，Unity 只 使 用 红色 通道 来 保存 金属 光泽 值 ， 而 绿色 和 蓝 色 通道 则 会 被 忽略 挥 。 

4. 使 用 图 片 的 alpha 通 道 来 表示 材质 的 平滑 信息 。 


5. 将 Metallic 映 射 指定 给 材质 。 此 时 Metallic 和 Smoothness 涓 块 应 该 会 消失 ， 因 为 这 两 个 属性 现在 受 映射 图 控制 了 。 


4.2.3 ”工作 原理 


在 老 的 着 色 器 中 ， 一 不 小 心 融会 创建 出 一 些 破坏 拟 实 性 的 乐 西 ， 比 如 在 某 举 现实 世界 中 根本 不 可 能 的 地 方 出 现 光 照 等。 出 现 
这 种 情况 的 原因 是 在 老 的 表面 着 色 器 中 ， 材 质 的 所 有 属性 是 不 相关 的 。 而 通过 引入 金属 光泽 的 工作 万 式 之 后 ，Unity 5 对 物体 的 
显示 万 式 进 行 了 很 多 限制 ， 这 样 我 们 束 很 难 创建 出 不 科学 的 材质 了 。 


金属 是 导电 的 ， 而 光 是 一 种 电磁 波 ， 这 融 意 味 着 与 非 导体 (又 叫绝 缘 体 ) 不 同 的 是 ， 所 有 的 金属 在 光照 下 的 行为 不 会 有 太 大 
差异 。 导 体会 反射 大 部 分 光子 ， 大 约 70% ~ 100%， 也 融 是 说 其 反射 率 很 局 ， 剩 余 的 没有 反射 的 部 分 会 被 材料 吸收 所 而 不 是 散射 
挥 ， 这 束 是 说 导体 的 散射 成 分 会 非常 瞳 。 而 绝缘 体 则 恰好 相反 ， 反 射 率 非常 之 低 (大 约 4%) ， 其 余 的 部 分 会 散布 在 表面 上 ， 构 
成 散射 的 成 分 。 


在 标准 痢 色 器 中 ， 纯 金属 材料 的 散射 成 分 非 营 少 ， 看 起 来 很 暗淡， 而 局 光 反 射 的 颜色 则 是 由 Albedo 映 射 决定 。 相 反 ， 在 纯 
非 金 属 材 料 中 ，Albedo 了 映射 则 表示 的 是 其 较 强 的 散射 成 分 的 颜色 ， 而 高 光 反 丑 的 颜色 则 是 输入 光 的 颜色 。 按 照 这 个 原理 ,金属 
光泽 工作 方式 可 以 把 反射 率 和 局 光 结合 到 Albedo 映 射 中 来 做 出 一 些 类 似 物 理 世界 的 行为 。 这 么 做 同样 可 以 节约 很 多 空间 ， 同 时 
也 会 极 大 地 提升 游戏 性 能 ， 唯 一 的 代价 是 降低 了 对 于 材质 外 观 的 可 控 性 。 


4.2.4 ”参考 


天 于 金属 光泽 属性 的 更 多 内 容 ， 请 参考 下面 的 链接 : 


:刻度 表 : 如 何 标 度 金属 材质 (http://blogs.unity3d.com/wp-content/uploads/2014/11/UnityMetallicChart.png) 。 

- 材质 表 : 常见 材质 如 何 初 始 化 标准 着 色 器 (http://docs.unity3d.com/Manual/Standard-ShaderMaterialCharts.html) 。 
Quixel MEGASCANS: 一 个 非常 丰富 的 材质 库 ， 包 含 纹 理 和 PBR 参 数 (http://quixel.se/megascans) 。 

* PBR 纹 理 转换 : 传统 着 色 器 如 何 转 换 成 PBR 着 色 器 (http://www.marmoset.co/toolbag/learn/pbt-conversion) 。 
Substance Designer: 一 个 基于 节点 的 PBR 软 件 (https://www.allegorithmic.com/products/substance-designer) 。 


` 基于 物理 基础 的 泻 染 理论 : PBR 的 完整 入 门 指 时 (https://www.allegotithmic.com/pbt-euide) 。 


4.3 给 PBR 添 加 透明 度 


透明 度 是 游戏 中 的 一 个 很 重要 的 部 分 ， 以 至 于 标准 着 色 器 提供 了 三 种 实现 透明 度 的 方式 。 如 果 你 想 有 一 些 透明 或 者 半 透 明 的 
拟 实 材质 ， 这 一 节 会 教 你 号 么 做 。PBR 透 明 着 色 器 能 制作 出 优秀 的 眼镜 、 玻 璃 狐 、 窗 户 、 水 晶 等 透明 材料 ， 因 为 你 可 以 在 保留 
PBR 所 市 来 的 民 好 拟 实 性 基础 上 添加 一 毕 透 明 或 者 半 透 明 效 果 。 如 果 你 只 是 想 给 一 些 不 是 十 分 重要 的 忒 西 添加 透明 度 ， 比 如 UI 元 
素 等 ， 可 以 使 用 我 们 在 第 2 草 提 到 的 一 些 更 加 廉价 高 效 的 方式 。 


Os 要 想 有 一 种 透明 的 标准 材质 ， 只 修改 Albedo 颜 色 属 性 的 alpha 通 道 是 远 远 不 够 的 ， 还 需要 设置 正确 的 Rendeting 


Mode 才 行 。 


4.3.1 ”准备 工作 


这 一 节 只 使 用 标准 着 色 器 ， 因 此 没 必 要 再 重新 创建 一 个 。 
1. 创 建 一 种 新 材质 
2. 确 保 材 质 的 Inspector 标 签 页 中 的 Shader 属 性 设置 成 了 standard 或 者 standard (Specular setup) 。 


3. 将 新 创建 的 材质 指定 给 一 个 你 想 使 之 迁 明 的 三 维 模 型 。 


4.3.2 ”操作 步骤 

标准 着 色 器 提供 了 三 种 不 同 的 方式 来 实现 透明 效果 。 虽 然 做 的 是 同样 的 事 ， 但 是 这 三 种 方式 有 一 些微 妙 的 不 同 ， 也 分 别 适 用 
于 不 同 的 场景 。 

半 透 明 材 料 


有 很 多 材质 是 半 透 明 的 ， 比 如 透明 塑料 、 水 晶 、 甫 璃 等 。 这 种 类 型 的 透明 材质 在 Unity 中 需要 用 到 PBR 的 所 有 拟 实效 果 ( 比 
如 高 光 反 射 和 非 涅 尔 反 射 、 折 射 等 ) ， 但 同时 其 后 面 的 几何 体 应 该 保持 部 分 可 见 。 如 果 你 需要 的 是 这 种 类 型 的 半 透 明 ， 操 作 步 又 
如 下 : 


1. 在 材质 的 Inspector 标 签 页 中 将 泻 染 模 式 (Rendering Mode) 设置 为 透明 (Transparent) 。 


2. 透 明 的 程度 是 受 Albedo 颜 色 或 者 Albedo 映 射 中 的 alpha 通 道 控制 的 。 


下 图 是 Unity 5 中 一 个 包含 了 四 种 不 同 透 明度 球体 的 校准 场景 。 从 左 到 石 透明 度 逐 渐 上 升 ， 最 右边 的 圆 球 是 完全 透明 的 ， 但 
是 你 还 是 可 以 看 到 PBR 作 用 之 后 的 高 光 等 特效 。 
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透明 泻 染 模 式 对 于 窗户 、 玻 璃 瓶 、 宝 石 等 透明 或 半 透 明 材 质 非 常 适 合 。 


Os 你 可 能 注意 到 了 ， 很 多 透明 材质 不 会 产生 阴影 效果 。 除 此 之 外 ， 材 质 的 金属 和 光滑 属性 可 能 会 对 透明 效果 产生 一 
此 影响。 比如 茶 些 镜子 型 的 表面 ， 其 alpha 通 道 可 能 已 经 设置 为 0 了 ， 但 是 如 果 这 种 表面 反射 所 有 的 输入 光 的 话 ， 它 看 起 来 肯定 不 
是 透明 的 。 


银色 物体 


某 毕 时 候 ， 你 制作 的 物体 会 通过 银色 效果 完全 消失 挥 。 这 种 物体 完全 消失 的 时 候 ， 其 


高 区 芭 射 和 菲 涅 尔 反 射 、 折 射 也 会 随 之 
消失 。 当 褪色 物体 全 透明 的 时 候 ， 它 本 身 融 成 了 不 可 见 的 了 。 如 果 你 要 制作 这 种 类 型 的 材质 ， 步 骤 如 下 : 


1. 在 材质 的 Inspector 标 等 页 中 设置 泻 染 模式 (Rendering Mode) 为 银色 (Fade) 。 
2. 与 透明 演 染 模式 一 样 ， 这 种 演 染 模式 也 使 用 Albedo 颜 色 或 者 Albedo 映 射 的 alpha 通 道 来 控制 透明 度 。 


下 图 展示 了 几 个 褪色 演 染 模式 下 的 球体 ， 可 以 看 到 相应 的 PBR 效 果 也 随 着 球体 的 透明 化 而 减弱 。 而 最 后 那个 完全 透明 的 球 
体 ， 已 经 整个 变 成 不 可 见 了 。 
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这 种 类 型 的 半 透 明 比 较 适 用 于 一 些 非 现实 物体 ， 比 如 全 息 图 、 激 光 光 束 、 人 和 人造 区 、 幽 灵 和 粒子 效果 等 。 
市 孔 的 几何 体 


游戏 中 的 大 部 分 材质 都 是 固体 ， 也 残 是 况 它 们 本 身 是 不 透 光 的 。 与 此 同时 ， 有 很 多 物体 的 几何 结构 特别 复杂 。 一 般 像 树 叶 、 
小 草 这 种 细微 物体 大 可 不 必用 三 维 模型 来 泻 染 。 一 种 更 加 高 效 的 办 法 是 将 树叶 纹理 设置 为 一 个 四 边 形 (长 万 形 ) ， 这 样 就 可 以 做 
到 树叶 本 身 不 透 光 ， 但 是 纹理 的 其 他 部 分 是 完全 透明 的 。 如 果 你 想 要 的 是 这 样 一 种 效果 ， 可 以 按照 下 面 的 步骤 来 实现 : 


1. 在 材质 的 Inspector 标 签 页 中 ， 将 演 染 模式 (Rendering Mode) 设置 为 剪 切 (Cutout) 。 
2. 使 用 Alpha Cutoff 滑 块 来 调节 前 切 阅 值 。 在 Albedo 了 映射 中 ， 所 有 alpha 通 道 值 小 于 或 等 于 设 阅 值 的 像素 点 都 会 被 隐藏。 


下 面 这 个 来 自 于 Unity 官 方 PBR 教 程 的 图 片 展 示 了 如 何 利用 剪 切 泻 染 模 式 来 制作 中 | 间 有 孔 的 几何 体 : 
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值得 注意 的 一 点 是 ， 剪 切 模式 会 让 住 几何 体 的 背面 。 在 上 面 这 个 例子 中 ， 你 是 看 不 到 球体 背面 的 东西 的 。 如 果 需 要 看 到 球体 
背面 ， 可 能 需要 创建 一 个 自 定义 的 着 色 器 ， 然 后 确保 球体 的 后 面 没 有 被 部 切 挥 。 


. 这 一 节 中 的 例子 都 是 通过 Unity 5 着 色 器 校准 场景 来 创建 的 。 这 个 场景 在 Asset Store 里 是 锡 


费 : 25422。 
` 更 多 关于 反射 率 和 透明 度 的 内 容 请 参考 http://docs.unity3d.com/Manual/StandardShaderMaterialParameterAlbedoColotr.html。 


在 观察 反射 型 镜面 时 ， 可 以 看 到 镜面 反射 物体 友 的 光 而 形成 的 镜像 。 不 平 的 是 ， 即 便 是 使 用 菲 涅 尔 反 射 这 种 非 单 精确 的 模 
型 ， 在 处 理 近 处 物体 的 反射 光线 时 也 会 失 准 。 之 前 草书 中 涉及 的 光照 模型 只 会 考虑 真正 的 光源 ， 而 不 会 计算 从 其 他 表面 反射 来 的 
光 。 从 我 们 现在 学 到 的 关于 着 色 器 的 知识 来 看 ， 要 达到 这 种 效果 几乎 是 不 可 能 的 。 全 局 照明 通过 给 PBR 着 色 器 提供 其 周围 环境 信 
恩 可 以 做 到 这 一 点 。 通 过 使 用 全 局 照明 ， 物 体 不 仅 可 以 有 高 光 反 射 ， 还 伴随 着 有 一 些 真 实 的 反射 ， 而 这 种 所 谓 的 真实 反射 依赖 于 
物体 周围 的 环境 。 实 时 反射 的 代价 是 相当 昂贵 的 ， 也 需要 很 多 人 工 的 微调 和 准备 工作 才能 真正 看 起 来 像 那么 回 事 。 如 果 操作 得 当 
的 话 ， 当 然 可 以 得 到 一 些 棚 棚 如 生 的 镜面 效果 。 比 如 像 下 图 这 样 : 





4.4.1 准备 工作 


这 一 证 不 需要 任何 新 的 着 色 器 ， 大 部 分 工作 都 是 直接 在 编辑 器 里 实现 的 ， 按 照 下 面 的 步 又 做 些 准 备 即 可 。 


1. 创 建 一 个 新 场景 。 
2. 创 建 一 个 四 边 形 ， 作 为 镜子 。 
3. 创 建 一 个 新 的 材质 ， 然 后 将 新 材质 绑 定 到 镜子 上 。 


4. 将 表示 镜子 的 四 边 形 和 其 他 物体 一 起 放置 在 场景 中 。 


5. 通 过 GameoObject|Light|Reflection Probe 创 建 一 个 新 的 反射 探头 ， 并 将 其 放置 在 四 边 形 的 前 面 。 


4.4.2 操作 步骤 
如 果 前 面 的 准备 工作 都 正确 做 完了 ， 你 的 场景 中 靠近 反映 探 头 的 地 方 应 该 有 一 个 四 边 形 。 要 让 这 个 四 边 形 看 起 来 像 一 面 镜 
子 ， 需 要 按照 下 面 的 步骤 做 些 改 变 : 


1. 将 材质 的 着 色 器 修改 为 standard， 将 其 泻 染 模式 设置 为 Dpadque。 


2. 将 其 Metallic 和 Smoothness 属 性 设置 为 |。 你 应 该 看 到 该 材质 可 以 清晰 地 反射 天 空 硼 景 。 


3. 选 择 反 射 探头 ， 然 后 修改 其 大 十 (Size) 和 探头 原点 (Probe Origin) 。 确 保 该 探头 刚好 在 四 边 形 前 面 ， 而 且 包 襄 了 所 有 


你 想 反 射 的 物体 。 


4. 最 后 将 探头 类 型 (Type) 修改 为 实时 (Realtime) 。 确 保 其 剪 切 遮 晶 (Culling Mask) 设置 为 Everything。 


反射 探头 的 属性 配置 应 该 如 下 图 所 示 : 


je 
Probe Scene Editing Mode: 


Type Realtime 


Refresh Mode Every frame 


Time Slicing Allfaces at once 


Runtime settings 
Importance 
Intensity 
Box Projection 
Size “ FSBbDUSIS YY b.S9l1U39 
Probe Origin A 


Cubemap capture settings 
Resolution | 2048 
HDR - 
shadow Distance 100 
Clear Flags | Skyb ox 
Backgraund 
Culling Mask | Everything 
WE Cullr 恒 
Clipping Planes Near 日 ,3 
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如 果 你 的 探头 是 用 来 做 一 个 真实 镜面 ， 应 该 选中 Box Projection 选 项 。 如 果 是 用 作 其 他 类 型 的 反射 表面 ， 比 如 闪 亮 的 金属 表 





面 或 者 玻璃 全 等 ， 可 以 不 用 勾 选 该 选项 。 
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当 着 色 器 需要 其 周围 信息 时 ， 周 围 信 息 通常 使 用 一 种 称 为 立方 体贴 图 的 结构 。 这 个 立方 体贴 图 映射 在 第 1 章 中 作为 着 色 器 属 
性 类 型 的 一 种 粗略 提 到 过 ， 它 可 以 是 Color、2D、Float 或 者 Vector 类 型 。 简 而 言 之 ， 立 方 体 贴图 是 一 种 等 价 于 三 维 的 二 维 纹 
理 ， 它 们 表示 了 一 种 从 中 心 位 置 360 度 观察 周围 的 全 视图 。Unity 5 中 立方 体贴 图 的 预览 是 一 个 球体 投影 ， 如 下 图 所 示 : 





当 立 廊 体 贴图 和 镜头 进行 绑 定 之 后 ， 贴 图 束 作 为 天 空 盒 存 企 了 ， 它 们 的 作用 与 反射 天 空 背 景 一 样 。 它 们 可 以 用 来 反 尉 一 些 并 
不 是 真 的 仓 企 于 场景 中 的 几何 体 ， 比 如 星云 、 云 层 、 星 辰 等 。 


之 所 以 被 称 为 立 万 体贴 图 ， 是 因为 它们 独特 的 创建 万 式 : 立 万 体贴 图 实际 上 是 使 用 6 个 不 同 的 纹理 构成 的 ， 分 别 代表 立 万 体 
的 六 个 面 。 你 可 以 手动 创建 一 个 立方 体贴 图 ， 也 可 以 手动 将 其 放 到 一 个 反射 探头 上 。 你 可 以 将 反射 探头 想象 成 一 个 6 个 镜头 的 集 
合 ， 通 过 这 6 个 镜头 可 以 模拟 出 360 度 环绕 的 周围 环境 。 知 道 了 其 工作 原理 ， 你 也 残 能 理解 为 什么 这 种 探头 所 需要 的 计算 代价 如 
此 昂贵 了 。 通 过 在 场景 中 添加 探 尖 ，Unity 可 以 知道 哪些 物体 环绕 在 镜子 周围 。 如 果 你 需要 更 多 的 反射 表面 ， 可 以 添加 更 多 的 探 
头 。 多 个 探头 的 操作 也 是 一 样 ， 并 不 需要 什么 额外 工作 ， 因 为 标准 着 色 器 会 目 动 使 用 这 些 探 头 。 


你 应 该 已 经 注意 到 了 ， 当 探头 被 设置 为 实时 之 后 ， 它 们 会 在 每 一 帧 的 开始 时 泻 染 其 对 应 的 立方 体贴 图 。 这 里 有 个 小 技巧 可 以 
让 它们 快 一 点 : 如 果 你 知道 反射 的 某 举 几何 体 本 身 不 会 移动 ， 可 以 烘 烘 其 反射 效果 。 意 思 是 说 Unity 可 以 在 游戏 开始 之 前 融 计 算 
好 反射 效果 ， 这 种 方式 的 计算 精度 更 局 (当然 计算 量 也 会 稍 大 一 些 ) 。 如 果 你 想 试 试 这 种 方式 ， 反 射 探头 应 该 设置 为 Baked， 并 
且 这 种 方式 只 对 那些 标注 为 静态 (Static) 的 物体 有 效 。 静 态 的 物体 不 可 移动 ， 也 不 可 以 改变 。 像 地 形 、 建 筑 物 、 文 柱 等 融 比 较 
适合 设置 为 静态 的 。 而 一 旦 某 个 静态 物体 发 生 了 一 点 改变 ，Untiy 会 为 其 烘焙 反射 探头 重新 计算 立方 体贴 图 ， 这 个 过 程 一 般 需 要 
几 分 钟 到 几 个 小 时 不 等 。 


可 以 混合 使 用 Realtime 和 Baked 探 头 来 提升 游戏 的 真实 感 。 烘 烧 探 头 可 以 提供 周围 环境 的 非 囊 局 质量 的 反射 效果 ， 而 实时 
探头 则 非常 适合 用 在 反射 运动 型 物体 上 ， 比 如 汽车 、 镜 子 等。 下 一 节 会 详细 讲解 光线 是 如 何 烘 焙 的 。 


如 果 你 对 反射 探头 比较 感 兴 趣 ， 可 以 看 看 下 面 这 个 链接 


* Unity 5 反射 探头 手册 : http://docs.unity3d.com/Manual/class-ReflectionProbe.html。 


4.5 ”在 场景 中 沐 加 烘 秒 5 


光线 的 泻 染 过 程 是 相当 昂贵 的 。 即 便 是 最 先进 的 GPU， 要 想 精 确 计算 光线 传播 过 程 (计算 光线 在 多 个 表面 间 反 射 的 过 程 ) 
都 要 几 个 小 时 。 为 了 让 游戏 中 这 个 计算 时 间 不 至 于 太 长 ， 实 时 泻 染 扩 术 应 运 而 生 。 现 代 游 戏 引擎 为 了 平衡 真实 性 和 性 能 ， 将 大 部 
分 的 计算 预先 进行 了 ， 这 个 过 程 束 称 为 光线 烘焙 。 这 一 节 我 们 会 详细 介绍 光线 烘焙 的 工作 原理 ， 以 及 如 何 使 用 烘焙 光 ，。 


4.5.1 ”准备 工作 


光线 烘 炒 需要 准备 好 场景 。 场 景 中 还 应 该 有 一 些 物体 以 及 光线 。 在 这 一 节 里 ， 我 们 只 利用 Unity 的 标准 功能 ， 因 此 并 不 需要 
创建 新 的 着 色 器 或 者 材质 。 为 了 更 好 地 操控 烘焙 光 ， 可 以 使 用 Lighting 窗 口 ， 如 果 不 知道 在 哪儿 的 话 ， 可 以 通过 
Window|Lighting 来 打开 该 窗口 。 


4.5.2 ”操作 步 台 


光 续 烘 烧 需要 一 些 手 动 配置 ， 主 要 有 三 个 大 的 独立 步骤 需要 你 来 完成 。 

配置 静态 几何 体 

配置 步 双 如 下 : 

1. 在 场景 中 找 出 几 个 不 会 改变 位 置 、 大 小 和 材质 的 物体 。 通 常 ， 建 筑 物 、 墙 、 地 形 、 支 柱 、 树 木 等 都 是 不 错 的 选项 。 


2. 选 择 这 些 物体 ， 然 后 选中 其 Inspector 标 签 页 中 的 Static 选 项 ， 如 下 图 所 示 。 如 果 某 些 选 中 的 物体 还 绑 定 了 一 些 子 物 
体 ，Unity 会 询问 你 是 否 要 将 这 些 子 物 体 一 并 设置 为 静态 。 如 果 这 些 子 物体 也 符合 静态 物体 的 特点 (位置 、 大 小 和 材质 不 会 发 生 
变化 ) ， 可 以 在 弹出 框 中 选择 “Yes，change children” 来 将 子 物体 也 设置 为 静态 的 。 


3 Inspector = Lighting 
到 Front 
Tag | Untagged 


J Transform 


| Quad (Mesh Filter]) 
要 Mesh Renderer 


-EEE:] 
Shader |Standard 





3. 如 果 光 线 被 设置 为 既 可 以 照 亮 静 仿 物体 ， 也 可 以 照 亮 非 静态 几何 体 ， 需 要 将 其 Baking 属 性 设置 为 Mixed。 而 如 果 只 影响 静 
态 物 体 ， 则 需要 设置 为 Baked。 


洲 戏 中 肯定 会 有 些 物体 是 可 以 移动 的 ， 比 如 主角 、 政 人 或 者 其 他 一 些 非 玩家 角色 (NPC) 等 。 如 果 它 们 进入 了 照 亮 的 静态 
区 域 ， 你 可 能 需要 用 光线 探头 包 庄 它 。 步 又 如 下 : 


1. 从 菜单 中 选择 GameObject|Light|jLight Probe Group， 此 时 在 层级 (Hierarchy) 视图 中 会 出 现 一 个 新 的 物体 ， 名 为 
Light Probe Group。 


2. 选 中 该 物体 之 后 ， 会 出 现 4 个 相互 连通 的 球体 。 在 场景 中 点 击 并 移动 这 些 球体 ， 让 它们 把 移动 角色 可 以 进入 的 静态 区 域 转 
起 来 。 下 图 展示 了 如 何 使 用 光线 探头 来 包围 一 个 静态 办 公 空间 。 


3. 选 择 可 能 会 进入 光线 探头 区 域 的 可 移动 物体 。 


4. 在 其 Inspector 标 签 页 中 ， 打 开 泻 染 器 组 件 (通常 都 是 Mesh Renderer) 。 然 后 确保 Use Light Probes 是 选中 的 (如 下 图 
所 示 ) oo 


请 人 Mesh Renderer 

Cast Shadows ‘On 
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决定 在 哪里 以 及 什么 时 候 使 用 光线 探头 是 另外 一 个 大 问题 。 更 多 这 些 方 面 的 内 容 在 4.5.3 节 介绍 。 





烘焙 光线 

烘焙 光线 的 步骤 如 下 : 

1. 要 最 终 实现 烘焙 光 ， 打 开 Lighting 窗 口 ， 选 择 其 Lightmaps 标 签 页 。 

2. 如 果 Auto 复 选 框 是 选中 的 ，Unity 会 在 后 台 自 动 执 行 烘焙 步骤 ， 否 则 就 单 击 Build。 

Os 光线 烘焙 可 能 需要 几 个 小 时 ， 哪 怕 是 在 很 小 的 场景 中 也 是 如 此 。 如 果 你 经 常 移动 静态 物体 或 者 光线 ，Unity 会 重 
会 变 


新 局 动 烘焙 过 程 ， 编 辑 器 


年 器 会 变 得 比较 缓慢 。 可 以 取消 选中 Lighting|Lightmaps 标 签 页 中 的 Auto 复 选 框 来 让 Unity 不 要 自动 烘焙 ， 这 样 
你 就 可 以 在 自己 认为 合适 的 时 候 执行 烘焙 动作 了 。 


4.5.3 ”工作 原理 


泻 染 时 最 复杂 的 部 分 是 光线 的 传播 。 在 这 个 阶段 GPU 会 计算 光线 在 多 个 物体 之 间 传 播 时 的 行为 。 如 果 物体 和 其 光线 并 不 移 
动 ， 这 个 过 程 其 实 只 需要 计算 一 次 ， 因 为 在 游戏 运行 过 程 中 ， 这 些 世 西 并 不 会 实时 改变 。 将 物体 标记 为 静态 ， 其 实 融 是 在 告诉 
Unity 可 以 对 这 些 物体 进行 烘 烧 等 预 处 理 优化 。 


一 言 以 菩 之 ， 光 线 烘焙 措 的 是 计算 一 个 物体 上 的 全 局 照明 ， 并 将 其 结果 保存 为 光线 映射 (lightmap) 的 过 程 。 一 旦 烘焙 完 
成 之 后 ， 就 可 以 在 Lighting 窗 口 的 Lightmaps 标 签 页 中 观察 到 光线 映射 了 。 


于 [ni pector 2 Lightinga 


Scane 


wv Auto 


1 direetional lightmap: 1024x1024px 


Preview 


Intensity Directionalit 





光线 烘焙 有 一 个 巨大 的 代价 ， 就 是 会 占用 很 多 内 存 。 事 实 上 每 一 个 静态 表面 都 被 重新 添加 了 纹理 ， 通 过 这 些 重新 添加 的 纹 
理 ， 将 光照 环境 添加 到 了 物体 上 。 想 象 一 下 由 一 片 树木 构成 的 森林 ， 所 有 的 树木 都 使 用 同样 的 纹理 。 一 旦 它们 被 设置 为 前 仿 ， 每 
个 树木 都 会 站 其 目 己 的 纹理 。 光 线 烘 焙 不 仅 会 增加 游戏 存储 空间 ， 盲 目 使 用 的 话 ， 还 会 增加 大 量 的 纹理 存储 。 


本 节 中 引入 的 第 二 部 分 是 光线 探头 。 光 线 烘 焙 可 以 给 静态 几何 体 提供 非常 高 质量 的 泻 染 效 果 ， 但 是 对 于 移动 物体 却 并 不 适 
用 。 如 果 你 的 角色 进入 了 某 个 静态 区 域 ， 可 能 会 看 起 来 与 环境 是 完全 脱离 的 。 它 的 阴影 可 能 与 环境 不 一 至 ,给 用 己 市 来 的 游戏 体 


验 会 非 旬 糟 糙 。 其 他 一 些 对 象 ， 比 如 表皮 网 格 着 色 器 ， 即 便 是 设置 成 静态 ， 也 不 会 接受 全 局 照明 。 即 使 通过 光绪 探头 这 个 替代 方 


案 可 以 给 移动 物体 添加 一 些 类 似 环境 的 光照 ， 实 时 烘 烘 光线 也 是 不 可 能 的 。 每 个 光线 探头 可 以 在 空间 中 采样 一 个 特定 的 点 。 一 组 
光绪 探头 可 以 在 空间 中 采样 多 个 不 同 的 点 ， 然 后 通过 指定 的 光照 程度 来 进行 插值 。 通 过 这 种 方式 我 们 可 以 给 移动 物体 添加 更 好 的 
环境 光照 ， 哪 怕 环 境 光照 只 是 计算 了 少数 几 个 后。 需要 记 住 的 很 重要 的 一 点 是 ， 光 线 探头 需要 填充 整个 区 域 才 会 工作 。 光 线 探头 
非常 适合 用 在 某 些 环境 中 光照 条 件 友 生 突 变 的 场合 。 与 光线 映射 相似 ， 光 线 探头 也 需要 大 量 的 内 存 资 源 ， 需 要 说 愤 使 用 。 还 需要 
记 住 一 点 ， 它 们 只 对 非 静 仿 几 何 体 适用 。 


即使 使 用 了 ;光绪 探头 ， 有 毕 方面 也 是 Unity 的 全 局 照明 无 法 捕获 到 的 。 比 如 襄 ， 非 静态 物体 是 无 法 反射 其 他 物体 上 友 的 旋 
的 。 


4.5.4 参考 


关于 光线 探头 的 更 多 内 容 请 参考 http://docs.unity3d.com/Manual/LightProbes.html。 


第 5 和 草 ” 顶 点 贞 数 


最 开始 着 色 器 这 个 名 字 的 来 源 是 因为 Cg 主要 用 来 模拟 三 维 模型 上 真实 的 光照 条 件 (以 及 阴影 效果 ) 。 时 至 今日 ， 着 色 器 能 
做 的 事 已 经 远 远 不 止 这 些 了 。 着 色 器 不 仅 决 定 了 物体 展现 的 万 式 ， 还 可 以 重新 定义 物体 的 形状 。 如 果 你 想 知 道 如 何 通 过 着 色 器 来 
修改 几何 结构 的 形状 ， 这 一 章 的 内 容 非 党 适合 你 。 


在 这 一 章 中 ， 你 会 学 到 如 下 内 容 : 
“ 在 表面 着 色 器 中 访问 顶点 顾 色 
“ 表面 着 色 器 中 的 顶点 动画 


“ 挤 压 模型 


蚁 


" 实现 雪花 着 色 


: 实现 体积 爆炸 效果 


在 第 1 草 中 ， 我 们 解释 了 三 维 模型 是 一 堆 三 角形 的 集合 。 三 角形 的 每 一 个 顶点 可 以 包含 一 些 基础 数据 ， 通 过 这 些 基础 数据 惑 
能 保证 该 模型 被 正确 地 泻 染 出 来 。 本 章 我 们 会 探究 一 下 如 何 得 到 顶点 中 的 这 部 分 信息 ， 并 且 在 着 色 器 中 使 用 它们 。 我 们 会 进一步 
探索 如 何 使 用 Cg 代码 来 修改 几何 结构 的 形状 。 











本 章 的 最 开始 ， 我 们 会 看 看 如 何 使 用 表面 着 色 器 中 的 顶点 函数 访问 模型 的 顶点 信息 。 这 会 教 给 我 们 一 些 天 于 模型 顶点 元 素 的 
基础 知识 ， 有 了 这 些 基础 知识 束 可 以 创造 出 真正 有 用 而 且 酷 烃 的 视 党 效果 。 


首先 要 知道 项 点 函数 中 的 一 个 顶点 能 够 包含 其 目 身 的 哪些 信息 : 会 得 到 float3 类 型 的 顶点 法 线 万 同 、float3 类 型 的 顶点 位 
置 ， 甚 至 可 以 存储 每 个 顶点 的 颜色 信息 ， 并 且 返 回 一 个 float4 类 型 的 颜色 值 。 这 些 都 是 本 章 将 要 讨论 的 内 容 ， 我 们 将 会 学 习 如 何 
在 表面 着 色 器 的 顶点 中 存储 顶点 的 颜色 信息 以 及 如 何 获 取 存 储 在 其 中 的 颜色 信息 。 


为 了 写 这 一 节 的 着 色 器 ， 我 们 需要 准备 几 个 资源 。 按 照 下 面 的 步 又 可 以 创建 硕 点 着 色 器 。 


1. 为 了 观察 项 点 的 颜色 ， 需 要 一 个 已 经 添 加 了 顶点 颜色 的 模型 。 你 可 以 在 Unity 中 完成 ， 但 是 需要 借助 一 些 工具 或 者 脚本 来 
应 用 这 些 颜色 。 在 本 例 中 ， 我 们 简单 地 使 用 Maya 来 给 模型 添加 颜色 。 在 本 书 的 Support 页 
和 .backtpub.com/books/content/support 上 可 以 找到 该 模型 。 


2. 创 建 一 个 新 场景 ， 将 导入 的 模型 放置 在 场景 中 。 
3. 创 建 一 个 新 的 着 色 器 和 材质 。 完 成 之 后 ， 将 着 色 器 指定 给 材质 ， 然 后 将 材质 添加 a 到 导入 的 模型 上 。 


现在 你 的 场景 应 该 看 起 来 如 下 图 所 示 : 





创建 完 场 景 、 着 色 器 、 材 质 之 后 ， 束 可 以 开始 编写 着 色 器 代码 了 。 人 在 Unity 编 辑 器 的 Project 标 签 页 中 双击 打开 着 色 器 。 


1. 因 为 我 们 只 是 做 一 个 简单 的 着 色 器 ， 所 以 不 需要 包含 任何 属性 。 但 是 为 了 和 本 书 的 其 他 着 色 器 保持 一 致 ， 还 是 将 下 面 的 代 
码 添加 到 着 色 器 的 Properties 代 码 块 : 


Properties 
MaraTint (“olLeobal Solor TLAE™, COLGrF) = ‘LyEl:it) 


2. 接 下 来 需要 告诉 Unity 我 们 将 在 着 色 器 中 添 加 一 个 顶点 消 数 : 


CGPROGRAM 


#pragma surface surf Lambert vertex:vert 


3. 像 之 前 一 样 ， 如 果 在 Properties 块 中 添加 了 属性 值 ， 束 需要 确保 在 CGPROGRAM 语 句 中 创建 一 个 对 应 的 变量 。 在 
#pragma 语 句 下 面 添 加 如 下 代码 : 


float4 MainTint; 


4. 现 在 我 们 将 注意 力 转移 到 Input 结 构 体 ， 为 了 使 surf () 函数 能 够 访问 顶点 立 数 vert () 传 入 的 值 ， 需 要 加 入 一 个 新 的 属 
性 。 


struct Input 


{ 


float2 uv MainTex; 


float4 VertCo or ; 


上 
5. 现 在 ， 可 以 编写 简单 的 vert () 锐 数 来 获取 存储 在 每 个 网 格 项 点 中 的 头 色 。 


void vert (inout appdata ful v, out Input ©) 


人 


O.VertColor = Vv.color: 


} 
6. 最 后 ， 在 surf () 消 数 中 从 Input 结 构 体 得 到 顶点 头 色 值 ， 将 它 指定 给 内 置 结构 体 SurfaceOutput 中 的 参数 o.Albedo。 
void surf (Input IN, inout SurfaceOutput o) 


{ 


OAlbedo = IN.vertColor.rgb * MainTint.rgb; 


| 


7. 完 成 这 些 代码 乙 后 ， 返 回 到 Unity 编 辑 器 ， 编 译 看 色 器 。 如 果 编 译 通过 的 话 ， 你 应 该 能 看 到 类 似 下 图 的 效果 。 





Unity 给 我 们 提供 了 一 种 访问 模型 顶点 信息 的 方式 ， 只 需要 将 着 色 器 抑 放 到 模型 上 残 可 以 了 。 在 本 节 中 ， 我 们 从 Maya 中 导 


入 了 一 个 网 格 (使 用 其 他 3D 软 件 也 可 以 完成 ) ， 在 Maya 中 可 以 将 顶点 颜色 添加 到 Verts 上 。 你 会 注意 到 导入 模型 的 默认 材质 是 
“会 显示 顶点 颜色 的 ， 我 们 必须 目 己 编写 一 个 着 色 器 才能 提取 顶点 颜色 并 将 它们 展示 在 模型 表面 。Unity 在 表面 着 色 器 中 提供 了 


很 多 内 置 方法 ， 帮 助 我 们 快速 而 又 有 效 地 获取 到 顶点 的 信息 。 


在 创建 着 色 器 时 ， 首 要 任务 是 告诉 Uniy 我 们 即将 使 用 一 个 顶点 国 数 。 通 过 在 CGPROGRAM 中 的 #pragma 语 句 内 添加 
vertex: vert 来 实现 这 一 点 。 这 样 ， 在 编译 着 色 器 时 ，Unity 会 自动 寻找 一 个 名 为 vert () 的 顶点 国 数 。 如 果 没 有 找到 ， 会 抛 出 一 


个 编译 铬 误 异 单 并 提示 你 需要 添加 一 个 顶点 图 数 。 


下 一 步 需要 参考 上 一 节 的 步骤 5 来 编写 vert () 国 数 。 在 国 数 中 ， 我 们 将 会 访问 一 个 叫 作 appdata full 的 内 置 结构 体 ， 该 结 
构 体 是 用 来 存储 顶点 信息 的 。 因 此 ， 接 下 来 通过 添加 代码 o.vertColor=v.color 将 顶点 信息 传 到 了 Input 结 构 体 ， 从 而 达到 提取 项 
点 颜色 信息 的 目的 。 


变量 o 代 表 的 残 是 Input 绪 构 体 ， 变 量 v 是 appdata_ full 顶点 数据 。 在 这 种 情况 下 ， 我 们 简单 地 从 appdata_full 结 构 体 中 得 到 
颜色 信息 并 将 它 放 入 Input 绪 构 体 。 一 旦 顶点 颜色 包含 在 Input 结 构 体 中 ， 惑 可 以 在 surf () 消 数 中 使 用 它 了 。 在 本 节 的 例子 中 ， 
我 们 简单 地 将 颜色 应 用 到 了 内 置 SurfaceOutput 结 构 体 的 参数 o.Albedo 上 。 


还 可 以 访问 项 点 颜色 的 第 4 个 组 件 。 如 果 你 注意 到 的 话 ， 会 友 现 在 Input 结 构 体 中 声明 的 vertColor 是 float4 类 型 。 这 意味 着 
也 可 以 使 用 顶点 头 色 的 alpha 值 。 了 解 了 这 些 ， 你 就 可 以 对 其 进行 充分 利用 。 可 以 存储 第 四 个 项 点 颜色 来 表现 一 些 特殊 效果 ， 比 
如 透明 度 ， 也 可 以 作为 混合 贴图 的 权重 。 是 否 使 用 第 四 个 组 件 完 全 取决 于 你 和 项 目的 实际 需要 ， 这 里 我 们 只 是 提 一 下 。 


在 Unity 5 中 ， 可 以 把 着 色 器 的 泻 染 目标 指定 为 DirectX 11。 这 个 功能 很 强大 ， 但 也 意味 着 着 色 器 的 编译 处 理 需 要 严格 的 额 


外 要 求 。 我 们 需要 多 加 一 行 代 码 到 着 色 器 来 对 顶点 图 数 进行 初始 化 。 如 果 你 在 着色 器 中 使 用 DirectX 11， 顶 点 沙 数 应 该 改 成 下 面 


这 样 : 


void vert (inout appdata full v, out Input o) 


{ 


UNITY INITIALIZE OUTPUT(Input, o); 


OVertColor = V.color: 


通过 添加 这 些 代码 ， 顶 点 着 色 器 束 不 会 抛 出 不 能 正确 编译 到 DirectX 11 的 警告 了 。 


5.3 ”表面 看 色 器 中 的 项 点 动画 


现在 我 们 已 经 知道 了 怎样 访问 每 个 顶点 的 数据 ， 下 面 介绍 如 何 访问 项 点 的 位 置 和 其 他 类 型 的 数据 。 
使 用 顶点 了 消 数 ， 可 以 访问 网 格 中 的 每 个 项 点 位 置 。 这 样 我 们 就 可 以 在 着 色 器 运行 过 程 中 动态 地 改变 每 个 顶点 的 位 置 了 。 


在 本 已 中 ， 我 们 将 创建 一 个 痢 色 器 ， 并 使 用 正 纺 波 来 动态 修改 网 格 上 每 个 顶点 的 位 置 。 访 技术 可 以 用 来 创建 一 些 动画 对 象 ， 
如 款 扬 的 旗帜 或 者 海面 的 波浪 效果 等 。 


5.3.1 ”准备 工作 


收集 一 些 有 用 的 资源 ， 通 过 这 尝 资 源 我 们 融 可 以 开始 写 顶 点 着 色 器 了 。 
1. 创 建 一 个 新 的 场景 ， 在 屏幕 的 中 间 放 入 一 个 平面 网 格 。 

2. 然 后 ， 创 建 一 个 新 的 着 色 器 和 材质 。 

3. 最 后 ， 将 看 色 器 指定 给 材质 ， 并 将 材质 添加 到 平面 网 格 上 。 


完成 这 些 操作 之 后 ， 你 的 场景 应 该 看 起 来 和 下 面 差不多 





5.3.2 ”操作 步骤 


场景 创建 完成 乙 后 ， 双 击 新 建 的 看 色 器 ， 在 MonoDevelop 中 打开 已。 


1. 首 先 填充 着 色 器 的 Properties 代 码 块 : 


Properties 

人 
MainTex ("Base (RGB)", 2D) = "white" {} 
tintAmount ("Tint Amount™; Range(0;1)) = 0;5 


.Colork ("Color A"; Color) El Tle Ls 

Calo ("Ceolor BB",. Colory = (yd I) 

Speed ("Wave Speed", Range(0.1, 80)) =5 
Freguencey ("Wave Fregqgueney"; Range(0; 5)y} = 2 
Amplitude ("Wave Amplitude", Range(=1, 1})} 三 工 


} 


2. 现 在 需要 添加 #pragma 声 明 ， 以 告诉 Unity 我 们 将 会 使 用 一 个 顶点 函数 。 


CGPROGRAM 


#pragma surface surf Lambert vertex:vert 


3. 为 了 能 访问 到 Properties 代 码 块 中 的 属性 值 ， 需 要 在 CGPROGRAM 代 码 块 中 声明 相应 的 变量 。 


sampler2D MainTex; 
float4 ColorA; 
float4 ColorB,; 
float tintAmount; 
float Speed:; 

float Frequencey:; 
float Amplitude; 
float OffsetVal; 


4. 接 下 来 ， 与 修改 顶点 颜色 一 样 ， 对 顶点 位 置 进行 修改 。 这 样 我 们 可 以 对 顶点 进行 着 色 。 


struct Input 


人 


float2 uv MailnTex; 
float3 vertColor; 


5. 此 时 束 可 以 使 用 正弦 波 在 顶 上 后 溺 数 中 对 顶点 位 置 进 行 修改 了 。 在 Input 结 构 体 中 加 入 如 下 代码 : 


void vert (inout appdata full vv, out Input o) 


{ 


float tme = Tinme * Speed:; 
float waveValueaA = Sin(time + Vvivertexx * Frequency) * 
Amplitude; 
V.vertex.xyz = float3(v.vertex.x, Vv.vertex.y + waveValueA, 


V.VeLrtexXx.Z) :; 

V.normal = normalize (float3(v.normal.x + waVveValueA， 
VOrnmal. YY: Vunorual)); 

O.VvertColor = float3 (waveValueA,waveValueA,waveValueA).; 


6. 最 后 ， 使 用 lerp () 了 尔 数 混合 两 种 颜色 来 完成 着 色 器 的 最 后 一 步 ， 这 样 ， 我 们 丈 可 以 通过 修改 顶点 立 数 来 做 出 起 伏 效 果 
J 


void surf (Input IN, inout SurfaceOutput o) 


{ 


half4 c¢ = tex2D ( MainTex; IN:uv MainTex); 
float3 tinteColor = Jerp( GOLGrA, Col6rB, INVertColo6r) ,rgb; 


©Albedo = Grgb * (tintColor * tintAmount)}):; 
oARlpha = Ca ay 


| 


完成 着 色 器 的 编写 以 后 ， 回 到 Unity 并 进行 编译 。 编 译 完 成 之 后 的 效果 图 应 该 如 下 图 所 示 : 





这 个 特殊 的 着 色 器 使 用 了 和 上 一 证 一 样 的 概念 ， 不 同 的 是 ， 这 一 次 修改 的 是 顶点 的 位 置 。 如 果 你 不 想 自 己 搭建 一 个 和信 单 的 物 
体 ， 比 如 款 扬 的 旗帜 ， 这 种 方法 会 非常 实用 ， 因 为 使 它们 运动 起 来 你 还 需要 修改 它们 的 骨 能 结构 或 者 层级 位 置 。 


我 们 使 用 Cg 语言 中 内 置 的 sin () 馈 数 来 模拟 正弦 波浪 起 伏 效 果 。 计 算 完 成 之 后 ， 将 该 值 赋 给 每 个 项 点 位 置 的 y 值 ， 制 作出 
了 一 种 波 瀛 起 伏 的 效果 。 


同时 我 们 还 在 正弦 曲线 值 的 基础 上 ， 对 网 格 的 项 点 法 线 进行 了 细微 的 调整 ， 以 便 让 它 看 起 来 更 加 逼真 。 

你 可 以 看 到 ， 通 过 在 表面 着 色 器 中 使 用 内 置 的 项 点 参数 ， 在 顶点 肖 数 中 做 出 丰富 的 效果 简直 轻而易举 。 
4 ” 拼 压 模型 

游戏 中 一 个 最 大 的 问题 是 重复 。 因 为 创建 新 内 容 是 很 花 时 间 的 ， 因 此 虽然 有 些 游 戏 里 面 你 会 遭遇 成 干 上 万 个 政 人 ,但 其 实 这 


些 政 人 看 起 来 都 是 一 样 的 ， 都 是 模型 的 拷贝 。 另 外 一 种 比较 廉价 的 修改 模型 的 技术 是 ， 使 用 着 色 器 来 调整 其 基础 几何 结构 。 这 一 
证 会 介绍 一 种 名 为 法 线 挤 压 的 技术 ， 通 过 这 种 技术 可 以 控制 模型 的 胖 瘦 。 下 图 就 是 一 个 Unity 中 做 出 来 的 例子 。 





5.4.1 ”准备 工作 

这 一 节 里 ， 需 要 用 到 你 想 微调 的 模型 上 的 着 色 器 。 如 果 你 已 经 准备 好 了 模型 ， 可 以 先 拷贝 一 份 ， 防 止 改 坏 了 回 不 去 。 拷 贝 的 
步骤 如 下 : 

1. 找 到 模型 正在 使 用 的 着 色 器 ， 选 中 之 后 使 用 Ctrl+ D 来 拷贝 一 份 。 

2. 将 模型 原来 的 材质 也 拷贝 一 份 ， 将 拷贝 的 着 色 器 指定 给 拷贝 的 材质 。 

3. 将 新 的 材质 指定 给 你 的 模型 对 象 ， 然 后 开始 编辑 。 


为 了 让 这 个 微调 能 生效 ， 你 的 模型 需要 有 法 线 。 


5.4.2 操作 步骤 


要 创建 这 种 效果 ， 需 要 按照 如 下 步骤 修改 拷贝 的 着 色 器 。 


1. 首 先 给 着 色 器 添加 一 个 属性 ， 这 个 新 的 属性 用 来 表示 挤 压 程度 。 该 属性 的 取 值 汽 围 设 定 为 -1 到 +1， 你 也 可 以 按照 自己 的 


理解 和 需要 进行 设置 。 
Amount ("Extrusion Amount", Range(-1,+1)) = 0 
2. 给 属性 添加 对 应 的 取 值 变量 。 


float Amount; 


3. 修 改 #pragma 指 令 来 让 其 使 用 顶点 修改 器 。 可 以 通过 在 末端 添加 vertex: function name 来 完成 。 在 这 里 ， 我 们 称 这 个 
国 数 为 vert: 


#pragma surface surf Lambert vertex:vert 


4. 添 加 下 面 的 顶点 修改 器 : 


void vert (inout appdata full v) I 
V. Vertex. xyz 二 = VV.Normal #* Amount; 


| 


5. 现 在 着 色 器 已 经 准备 好 了 ， 可 以 使 用 材质 的 Inspector 标 签 页 中 的 Extrusion Amount 滑 块 来 控制 模型 的 胖 瘦 了 。 


5.4.3 ”工作 原理 


表面 看 色 器 的 工作 原理 主要 是 两 个 步骤 。 在 前 面 的 章节 中 ， 我 们 只 是 在 摸索 其 后 面 那个 步 又， 也 融 是 表面 阔 数 。 其 实 还 有 另 
外 一 个 功能 也 可 以 供 我 们 使 用 : 顶 点 修改 器 。 这 个 图 数 接受 的 数据 结构 是 一 个 顶点 (通常 称 为 appdata_full) ， 然 后 该 溺 数 会 对 
接收 到 的 项 点 做 一 些 转换 。 通 过 这 个 契机 ， 我 们 可 以 目 由 地 对 模型 的 几何 结构 做 些 修 改 和 调整 。 通 过 给 着 色 器 的 #pragma 指 令 
添加 vertex: vert 来 告诉 图 像 处 理 器 有 这 样 一 个 立 数 的 存在 。 在 第 6 草 中 ， 你 还 会 学 习 到 如 何在 顶点 和 碎片 着 色 器 中 使 用 顶点 编 
辑 器 。 

有 一 个 非 弟 简单 但 是 有 效 的 技术 可 以 用 在 修改 模型 的 几何 结构 上 ， 称 之 为 法 线 挤 压 。 工 作 原 理 是 将 顶点 沿 法 线 万 同 进行 投 
影 。 下 面 这 段 代 码 束 是 做 这 一 点 的 : 


Ve.Vvertex. xys += VY.Nnormal * Mmounts 


顶点 的 位 置 被 替换 成 项 点 法 线 方向 的 Amount 倍 。 如 果 Amount 的 值 比较 大 ， 结 果 可 能 很 奇怪 。 而 如 果 值 比较 小 的 话 ， 就 
可 以 对 模型 做 很 多 变化 了 。 


5.4.4 ”更 多 内 容 


如 果 你 的 游戏 里 面 有 很 多 重复 的 敌人 ， 想 让 每 一 个 政 人 有 其 自己 的 权重 的 话 ， 需 要 为 它们 分 别 创建 不 同 的 材质 。 这 是 必要 
的 ， 因 为 如 果 你 共用 同一 个 材质 的 话 ， 修 改 一 个 也 会 影响 到 其 他 的 地 方 。 有 多 种 办 法 可 以 达到 这 一 目的 ， 最 快 的 办 法 是 写 一 个 脚 
本 来 让 Unity 自 动 完成 。 下 面 这 个 脚本 中 ， 一 旦 通过 泻 染 器 指定 给 了 某 个 对 象 ， 束 会 将 其 第 一 个 材质 进行 复制 ， 然 后 自动 设置 
_Amount 值 。 
using UnityEngine; 
public class NormalExtruder : MonoBehaviour { 


[Range(-0.0001f, 0.0001f£)] 


public float amount = 0; 


// Use this for initialization 


void Start () { 
Material material = GetComponent<Renderer>() .sharedMaterial,; 
Material newMaterial = new Material (material).; 
newMaterial.SetFloat(" Amount", amount).,; 
GetComponent<Renderer>() .material = newMaterial; 

} 

} 
添加 挤 压 映射 


这 个 技术 还 可 以 进一步 改进 。 我 们 可 以 额外 添加 一 个 纹理 (或 者 使 用 主要 纹理 的 alpha 通 道 也 可 以 ) 来 表示 挤 压 程度 。 通 过 


这 种 方式 可 以 更 好 地 控制 哪些 部 分 需要 凸 起 或 者 叫 陷 。 你 可 以 通过 下 面 这 段 代码 来 实现 这 种 效果 : 


sampler2D ExtrusionTex; 

void vert (Inout appdata full v) { 

float4d tex = tex2Dlod ( ExtrusionTex, float4(v.texcoord.xy;,0,0)). 
float extrusion = tex.r * 2 - 工 ; 
V-VeIztex:XYzZ += Vnormal * Amount * extrusion; 


} 


_ExtrusionTex 的 红色 通道 值 会 用 作法 线 挤 压 的 乘法 因子 。 值 为 0.5 表 示 不 做 任何 挤 压 ， 颜 色 越 深 表 示 越 凹陷 ， 颜 色 越 浅 则 表 
示 越 凸 起 。 你 应 该 已 经 看 到 ， 要 想 从 顶点 修改 器 中 采样 一 个 纹理 ， 应 该 使 用 tex2Dlod 而 不 是 tex2D。 


Os 在 着 色 器 中 ， 颜 色 通 道 的 取 值 范围 是 0 到 1， 虽 然 某 些 时 候 你 可 能 需要 用 到 负 值 (比如 凹陷 的 时 候 ) 。 这 时 0.5 等 
价 于 0， 然 后 比 0.5 小 的 对 应 负 值 ， 比 0.5 大 的 对 应 正 值 。 这 就 是 法 线 真正 的 工作 方式 ， 负 值 表 示 反 向 。UnpackNormal () 函数 就 是 
用 来 将 值 域 从 (0，1) 映射 到 (一 1，+1) 的 ， 其 计算 逻辑 是 tex.fk2 -1。 


对 于 僵尸 角色 ， 挤 压 映 冉 是 非常 合适 的 。 通 过 挤 压 映射 可 以 把 角色 的 皮肤 进行 萎缩 ， 只 留 下 骨架 。 下 图 展示 了 如 何 使 用 着 色 
器 和 挤 压 映射 让 一 个 正常 士兵 变 成 一 具 尸 体 。 对 比 一 下 之 前 的 例子 ， 可 以 看 到 士兵 的 衣着 是 没 受 影响 的 。 下 图 中 使 用 的 士兵 被 挤 
压 抒 的 地 方 是 黑色 的 ， 恰 好 宫 人 造 了 一 种 瘦弱 感 。 


加 





5.5” 买 现 雪人 化 寿 色 器 


游戏 中 的 雪人 花 效 果 一 直 以 来 都 是 一 个 难题 。 很 多 游戏 中 都 是 直接 在 模型 的 纹理 中 添加 要 履 兰 的 效果 来 让 它们 看 起 来 像 是 在 要 
中 一 样 。 但 是 ， 如 果 这 些 对 象 开 始 旋 转 会 怎样 呢 ? 它们 身上 的 雪 看 起 来 束 像 涂 上 去 的 日 色 油 漆 一 样 有 些 失 真 。 当 然 这 也 是 没 办 法 
的 事情 ， 很 多 游戏 都 是 这 么 做 的 。 这 一 节 里 面 ， 我 们 会 讲解 如 何 只 通过 着 色 器 来 制作 出 这 种 被 雪 获 茉 的 模型 。 


这 个 效果 需要 两 个 步 又 ， 首 先 所 有 面 朝天 空 的 三 角形 要 弄 成 日 色 ， 其 次 这 些 三 角形 的 顶点 要 进行 一 定 的 芝 松 ， 以 模拟 出 大 雪 
覆 兰 的 样子 。 下 图 是 一 个 做 好 的 例子 : 





全 


注意 ” 记 住 一 点 ， 这 一 节 里 我 们 的 目的 并 不 是 做 酷 炉 的 雪花 效果 。 


5.5.1 “准备 工作 
这 个 效果 完全 依赖 于 着 色 器 ， 我 们 需要 下 面 这 些 东 西 : 
1. 为 大 雪 窗 六 特 效 创建 一 个 新 的 着 色 器 。 
2. 为 着 色 器 创建 一 个 新 的 材质 。 


3. 将 新 创建 的 材质 指定 给 你 想 履 盖 上 雪 的 模型 。 


5.5.2 “操作 步骤 


这 只 是 一 个 起 点 ， 非 常 酷 炫 的 效果 需要 美工 的 支持 才 


要 制作 雪花 履 兰 效 果 ， 打 开 痢 色 器 ， 然 后 按 下 面 的 步骤 进行 操作 : 


1. 为 看 色 器 添加 如 下 属性 : 


.ManColor("Man Color": Colory = 105LabaJrDOeG) 
MainTex("Base (RGB)", 2D) = "white" {} 

Bump ("Bump", 2D) = "bump" {} 

Snow("Level of snow"; Range (1; =13)}) = 1 
aerolorn("Eolor BE BHOW", Color) © tle LO .QL 0 
STIGWDIrection( "DIrection of Snow", Vector) = (0,1,0) 


_SnowDepth("Depth of snow", Range(0,1)) = 0 


2. 为 这 些 属性 添加 对 应 的 变量 : 


sampler2D MainTex; 
sampler2D Bump; 

float Snow; 

float4 SnowColor; 
float4 MainColor; 
float4 SnowDirection; 
float SnowDepth, 


3. 将 Input 结 构 体 换 成 下 面 代 码 : 


struct Input { 
float2 uv MainTex; 
float2 uv Bump; 
float3 worldNormal:; 
INTERNAL DATA 


Fs 


4. 将 表面 溺 数 换 成 下 面 的 代码 ， 这 段 代码 会 把 模型 上 羡 雪 的 部 分 涂 成 日 色 : 


void surf (Input IN, inout SurfaceOutputStandard o) { 
half4 c = tex2D( MainTex, IN.uv MalnIex) ; 
oO.Normal = UnpackNormal (tex2D( Bump, IN.uv Bump) ) ; 


if (dot (WorldNormalVector (IN, o.Normal), 
_SnowDirection.xyz) >= _Snow) 


o.Albedo = SnowColor.rgb; 
else 

OG.AlBbedO = .rgb * MalinColor; 
SBIpBNs = EE; 


} 
5. 配 置 #pragma 指 令 来 让 其 使 用 顶点 修改 器 。 
#pragma surface surf Standard vertex:vert 


6. 添 加 下 面 的 顶点 修改 器 函数 ， 该 冰 数 会 将 功 雪 的 部 分 进行 膨胀 。 


void vert (inout appdata full v) { 
float4 sn = mul (UNITY MATRIX IT MV, SnowDirection).,; 
if (dot (v.normal, sn.xy2Z)} >= Snow) 


V.vertex.xXyz += (SNn.XyzZ + V.normal) * SnowDepth * Snow; 


| 


完成 上 面 步骤 之 后 ， 你 可 以 通过 材质 的 Inspector 标 签 页 来 调整 模型 需要 有 多 少 部 分 是 被 雪 履 苹 的 ， 以 及 雪 要 苹 多 厚 。 


5.5.3 ”工作 原理 


这 个 着 色 器 的 工作 方式 分 为 两 大 步 。 
给 表面 着 日 色 的 雪 


第 一 步 是 将 绷 看 天 空 的 三 角形 的 颜色 设置 为 日 色 。 这 一 步 会 涉及 所 有 法 续 方 向 与 SnowDirection 比 较 接近 的 三 角形 。 前 面 
第 3 章 已 经 提 到 过 了 ， 比 较 两 个 单位 加 量 的 方向 可 以 使 用 点 积 。 如 果 两 个 回 量 垂直 ， 它 们 的 点 积 为 0; 如 果 万 同 完 全 一 样 ， 则 避 
积 为 1。 使 用 _Snow 属 性 来 决定 多 大 的 角度 算是 朝 着 大空。 


如 果 仔 细 看 看 表面 肖 数 ， 你 会 友 现 我 们 并 没有 直接 对 法 线 和 下 雪 方 向 做 点 积 。 这 是 因为 它们 通常 定义 在 不 同 的 空间 。 下 雪 的 
方向 应 该 是 一 个 全 局 世界 坐标 ， 而 物体 的 法 同 通 党 是 相对 于 模型 自己 的 。 如 果 旋 转 模 型 ， 模 型 上 的 三 角形 的 法 线 并 不 会 改变 ， 这 
不 是 我 们 想 要 的 ， 因 为 旋转 之 后 面 朝 大 雪 的 方向 其 实 已 经 变 了 。 为 了 修复 这 个 问题 ， 需 要 将 三 角形 的 法 线 从 相对 坐标 转换 为 世界 
绝对 坐标 。 这 个 转换 可 以 通过 WorldNormalVector () 函数 来 实现 ， 也 就 是 下 面 的 代码 : 


if (dot (WorldNormalVector(IN, o.Normal), SnowDirection.xyzZ) >= 
_ Snow) 
oO.Albedo = SnowColor .rgb; 

else 


oO.ALBDeéde = CG Lgb * MainCoOlor; 


着 色 器 会 简单 地 把 模型 演 染 成 日 色 。 更 高 级 的 做 法 是 使 用 更 接近 真实 大 雪 效 果 的 纹理 和 参数 来 初始 化 
SurfaceOutputStandard 结 构 。 


调整 几何 结构 


这 个 着 色 器 的 第 二 步 是 对 几何 结构 进行 了 调整 ， 营 造 出 积 雪 的 感觉 。 首 先 通过 前 面 表面 溺 数 中 相同 的 判断 条 件 识别 出 那些 已 
经 被 涂 成 日 色 的 三 角形 。 不 六 的 是 ， 这 一 次 我 们 不 能 依赖 于 WorldNormalVector () 六 数 了 ， 因 为 SurfaceOutputstandard 结 
构 还 没有 在 顶点 修改 器 中 进行 初始 化 。 我 们 使 用 另外 一 个 方法 来 将 _SnowDirection 转 换 为 物体 坐标 。 


float4 sn = mul (UNITY MATRIX II MV, SnowDirection).,; 


然后 ， 可 以 挤 压 几何 结构 来 模拟 积 雪 。 


if (dot (Vv.normal, sn.xy2z) >= Snow) 


V.vertex.xyz += (Sn.XYzZ + Vv.normal) * SnowDepth * Snow; 


再 次 重申 一 下 ， 这 只 是 一 个 非常 基础 的 效果 。 如 果 想 达到 更 加 真实 酷 炫 的 效果 ， 请 使 用 纹理 映射 而 不 要 用 这 个 万 法 。 


5.5.4 ”参考 


如 果 你 需要 高 质量 的 积 雪 效果 ， 可 以 查看 Unity 资 源 商店 里 的 以 下 内 容 : 
Winter Suite ($30) : 一 个 非常 精细 的 雪花 着 色 器 ， 地 址 是 https://www.assetstore.unity3d.com/en/#! /content/13927。 


. Winter Pack ($60) : 一 个 非常 逼真 的 资源 包 ， 专 为 大 雪 环 境 定制 ， 链 接 


是 https://www.assetstore.unity3d.com/en/#! /content/133106。 


5.6 ”实现 体积 爆 人 FF 效果 


我 们 已 经 讲 过 很 多 次 了 ， 洲 戏 开 友 始 终 是 在 效果 和 性 能 乙 间 找平 衡 。 对 于 爆炸 效果 而 言 更 是 如 此 。 尽 管 真实 爆炸 效果 的 物理 
计算 经 单 会 超出 现在 计算 机 的 计算 能 力 ， 但 仍然 不 可 人 否认 爆炸 效果 是 很 多 游戏 之 核心 。 爆 炸 无 非 惑 是 一 团 很 热 的 气体 ， 因 此 唯一 
能 模拟 爆炸 效果 的 方式 束 是 模拟 流体 的 行为 。 你 应 该 能 想到 ， 模 拟 流 体 的 行为 对 于 运行 时 洲 戏 而 言 是 几乎 不 可 能 的 ， 因 此 很 多 游 
戏 简单 地 通过 粒子 效果 来 模拟 爆炸 。 比 如 在 爆炸 的 时 候 ， 用 一 些 火 焰 、 烟 雾 和 碎片 粒子 来 做 出 类 似 爆 炸 的 效果 。 这 种 实现 方式 不 


以、 


是 特别 真实 ， 也 很 容易 出 现 一 毕 不 太 合 理 的 斑点 。 基 于 此 残 有 了 一 种 称 为 体积 爆炸 的 折 中 方案 。 体 积 爆炸 背后 的 概念 是 : 爆炸 效 
果 并 不 是 一 堆 粒 子 ， 它 们 也 是 三 维 对 象 ， 而 不 是 局 平 的 二 维 纹 理 。 


5.6.1 ”准备 工作 


这 一 书 需要 按照 如 下 步骤 进行 准备 : 
1. 为 此 特效 创建 一 个 新 的 着 色 器 。 
2. 创 建 一 种 新 的 材质 来 使 用 这 个 着 色 器 。 


3. 将 材质 绑 定 到 一 个 球体 上 ， 在 编辑 器 中 创建 球体 的 方法 是 GameObject|3D Object|Sphere。 


Os 这 一 节 中 用 标准 的 Unity 球 体 就 可 以 了 ， 如 果 你 想 制 作 大 爆炸 ， 可 能 需要 一 个 更 大 的 球体 。 事 实 上 顶点 函数 只 能 
修改 网 格 的 顶点 。 网 格 中 的 其 他 点 都 是 按照 相 邻 顶点 上 的 信息 插值 得 到 的 。 顶 点 越 少 意味 着 爆炸 效果 的 分 辨 率 越 低 。 

4. 这 一 节 中 ， 还 需要 一 个 坡度 纹理 ， 这 个 坡度 里 面包 含 爆炸 所 需 的 所 有 颜色 。 可 以 使 用 GIMP 或 者 Photoshop 创 建 一 个 类 似 
下 图 的 纹理 : 





5. 有 了 这 个 纹理 图 之 后 ， 将 其 导入 Unity。 然 后 在 其 lnspector 标 签 页 中 ， 确 保 Filter Mode 设 置 为 Bilinear，Wrap Mode 设 
置 为 Clamp。 这 两 个 设置 可 以 确保 坡度 纹理 被 平滑 采样 。 


6. 最 后 需要 一 个 噪声 纹理 。 你 可 以 在 网 上 找 一 个 免费 的 噪声 纹理 ， 最 常见 的 是 Perlin 品 声 纹理 。 


5.6.2 ”操作 步 又 


体积 爆炸 效果 的 制作 分 两 步 : 首先 通过 顶点 肖 数 修改 几何 结构 ， 其 次 利用 表面 浮 数 进行 正确 的 着 色 。 步 又 如 下 : 


1. 给 着 色 器 添加 如 下 属性 : 
RampTex ("Color Ramp", 2D) = "white" {} 
RampOffset ("Ramp offset", Range(=0.5;0.5))= 0 
NoiseTex ("Noise tex", 2D) = "gray" {} 
Periocod ("Period", Range(0,1)) = 0.5 
Amount (" Amount",; Range(0 1.0)) = 0.1 


| 
上 


ClIipRange("Cl1l1ipRange"; Rarnge (0,1)) 


2. 添 加 属性 相对 应 的 变量 ， 以 便 让 Cg 代码 可 以 访问 到 这 些 属性 。 


sampler2D RampTex; 
half RampOffset, 


sampler2D NoiseTex,; 
flont Period; 


half Amount; 
half ClipRange; 


3. 修 改 Input 结 构 ， 让 其 接受 坡度 纹理 的 UV 值 : 


struct Input { 
float2 uv NoiseTex; 


和 
4. 添 加 下 面 的 顶 挟 消 数 : 


void vert (inout appdata full v) 1 


float3 disp = tex2Dlod( NoiseTex, 
loata(v. texcoorgd. Ry,.Q,.0))3 


float time = sin( Timel3] * Period + disp.r*10).; 


V.Vertex.xXyZ += VY.normal * disp.r * Amount ** time; 


| 


5. 添 加 下 面 的 表面 阔 数 : 


void surf (Input IN, inout SurfaceOutput o) f{ 


float3 noise = tex2D( NoiseTex; IN;uv NoiseTex); 


float n= saturate(nolise.r + RampOoftfeset)}); 


clip( ClipRange - ni):; 
half4 Cc = tex2D( RampTex,; float2 (n;0,5)); 


oO.Albedo = Cc.rgb; 
nD. EmLSSLON = CrqbD*ce,. ns 
6. 在 #pragma 指 令 中 指定 顶点 函数 ， 添 加 nolightmap 人 参数 来 阻 上 Unity 给 爆炸 效果 添加 真实 光照 。 
#pragma surface surf Lambert vertex:vert nolightmap 


7. 最 后 一 步 是 选择 材质 ， 然 后 在 其 Inspector 标 签 页 的 对 应 栏 中 添加 两 个 纹理 。 这 是 一 个 动态 材质 ， 意 味 着 它 会 随时 间 变 
化 。 你 可 以 通过 单 击 Scene 窗 口中 的 Animated Materials 来 观看 材质 在 编辑 器 中 的 变化 过 程 。 


琅 Protiler 
2D 


EY |s wa ls na 


Fog 
F|ares 
Animated Materlals 





5.6.3 ”工作 原理 


现在 ， 你 应 该 已 经 对 表面 着 色 器 和 顶点 编辑 器 的 工作 方式 有 所 了 解 了 。 这 个 效果 背后 的 原理 是 ， 按 照 某 种 混乱 的 方式 修改 球 
体 的 几何 结构 ， 也 丈 是 真实 爆炸 时 友 生 的 情况 。 下 图 展示 了 我 们 前 面 编辑 的 爆炸 球体 可 能 呈现 的 一 种 样子 ， 可 以 看 到 开始 的 网 格 


已 经 严重 变形 了 。 





这 里 的 项 点 遂 数 是 前 面 提 到 的 法 线 挤 压 拉 术 的 一 个 变种 。 唯 一 不 同 的 是 ， 这 里 的 挤 压 程度 是 由 时 间 和 噪声 纹理 决定 的 。 

S. EF 蕊 ”在 Unity 中 如 果 你 需要 一 个 随机 数 ， 可 以 使 用 Random.Range () 函数 来 实现 。 在 着 色 器 中 获取 随机 数 并 没有 什么 
标准 方式 ， 因 此 最 简单 的 办 法 就 是 像 我 们 这 样 使 用 一 个 噪声 纹理 来 采样 。 

天 于 如 何 制造 噪声 并 没有 什么 标准 办 法 ， 比 如 这 个 例子 里 下 面 这 样 做 也 是 可 以 的 : 


float tinme = Bln( Timel3) * PerIed + disp.r*10); 


内 置 的 Time[3] 变 量 用 来 从 着 色 器 中 获取 当前 时 间 ， 噪 声 纹 理 的 红色 通道 disp.r 用 来 确保 每 个 顶点 可 以 独立 移动 。 而 sin () 
沙 数 则 用 来 控制 项 点 凸 起 或 者 叫 陷 ， 通 过 这 种 无 规则 的 凸 起 和 四 陷 来 模拟 爆炸 时 混乱 膨胀 的 行为 。 崇 接着 就 友 生 了 法 线 挤 压 : 


VVvertex YZ = VNOrmal * dispr * Amount * Imes 
你 可 以 调整 一 下 这 些 数 字 和 变量 ， 直 到 做 出 某 种 你 想 要 的 移动 方式 为 止 。 


体积 爆炸 特效 的 最 后 一 部 分 是 通过 表面 阔 数 完成 的 。 这 里 使 用 了 噪声 纹理 来 从 坡度 纹理 中 采样 一 个 随机 颜色 。 有 另外 两 个 值 
得 一 提 的 方面 ， 第 一 个 方面 是 引入 了 _RampOffset， 通 过 引入 它 可 以 控制 爆炸 的 颜色 及 样 是 从 左 还 是 从 右 进 行 。 如 果 它 是 正 
值 ， 表 示 爆 炸 表 面 会 使 用 一 些 较 灰暗 的 颜色 ， 用 来 模拟 爆炸 时 的 效果 恰好 合适 。 可 以 使 用 _RampOffset 来 决定 爆炸 过 程 中 有 多 


少 火化 和 烟雾 。 第 二 个 方面 是 使 用 了 clip () 立 数 ，clip() 尔 数 的 作用 是 把 像素 从 泻 染 流程 中 剪 挥 。 如 果 调 用 的 时 候 传 入 负 
值 ， 当 前 像素 融 不 会 银 泻 染 。 这 个 效果 是 通过 ClipRange 来 控制 的 ， 通 过 部 分 勇 切 的 方式 可 以 让 体积 爆 烽 时 部 分 像素 变 为 透明 


通过 控制 RampOffset 和 _ClipRange， 你 可 以 完全 控制 爆炸 和 分 解 的 行为 。 


5.6.4 更 多 内 容 


这 一 节 中 展示 的 着 色 器 让 球体 看 起 来 像 个 爆炸 体 。 如 果 你 真 的 想 用 它 ， 可 能 还 需要 通过 一 些 脚本 来 对 它 进 行 适度 的 控制 。 最 
好 的 万 式 是 创建 一 个 爆炸 对 象 ， 然 后 将 其 放 入 预制 件 中 ， 以 后 每 次 都 可 以 用 这 个 预制 件 了 。 你 可 以 通过 将 该 球体 抱 蝶 到 Project 
窗口 来 实现 。 一 旦 做 成 了 预制 件 ， 你 束 可 以 使 用 Instantiate () 函数 来 随意 创建 任意 多 个 爆炸 体 了 。 


值得 一 提 的 是 ， 所 有 共用 材质 的 对 象 一 般 看 起 来 都 是 一 样 的 。 如 果 你 想 将 几 个 爆炸 体 放 在 一 起 ， 它 们 应 该 使 用 不 同 的 材质 。 
当 你 在 初始 化 爆炸 的 时 候 ， 还 应 该 将 材质 进行 拷贝 。 下 面 这 段 代 码 束 可 以 帮 你 完成 : 


GameObject explosion = Instantiate (explosionPrefab) as GameObject,; 
Renderer renderer = explosion.GetComponent<Renderer> () ; 
Material material = new Material (renderer.sharedMaterial).; 
renderer.material = material.; 
最 后 ， 如 果 你 想 让 爆炸 效果 更 加 真实 ， 应 该 通过 一 个 脚本 来 修改 其 尺寸 RampOffset 和 _ClipRange， 当 然 具 体 情况 要 具体 


5.6.5 参考 


要 想 让 爆炸 效果 更 加 酷 炉 ， 还 有 很 多 其 他 的 万 式 。 这 一 万 中 的 办 法 其 实 只 是 做 了 一 个 空 壳 ， 在 这 个 空 壳 里 面 什么 都 没有 。 一 
种 简单 的 改进 办 法 是 在 这 个 空 壳 里 面 添 加 一 些 粒 子 ， 但 是 也 就 只 能 这 样 了 。 有 一 个 很 好 的 例子 ， 是 用 Unity+Passion 
Pictures+ Nvidia 制作 的 一 个 名 为 《蝴蝶 效应 》 的 短 电 影 (http://unity3d.com/pages/butterfly) 。 这 个 短片 里 面 就 使 用 了 相 
同 的 原理 来 修改 球体 的 几何 结构 ， 但 是 它 是 用 了 一 种 名 为 体积 光线 投掷 的 扩 术 。 简 言 乙 ， 它 将 几何 结构 泻 染 成 实心 状 ， 截 图 如 下 
所 示 : 





如 果 你 需要 一 些 高 质量 的 爆炸 效果 ， 可 以 参考 Unity 人 资源 商店 的 Pyto 
Technix (https://www.assetstore.unity3d.com/en/#! /content/16925) ,其 中 包含 了 很 多 体积 爆炸 以 及 爆炸 冲击 波 等 酷 炫 


的 爆炸 效果 。 


第 6 草 ” 俊 片 厦 色 器 和 抓 取 


到 现在 为 止 ， 我 们 一 直 都 在 用 表面 着 色 器 。 表 面 着 色 器 用 来 简化 看 色 器 代码 的 工作 方式 ， 并 且 能 为 美工 提供 一 些 有 意义 的 工 
探究 竟 了 。 


具 。 如 果 我 们 想 让 着 色 器 的 知识 得 到 进一步 扩展 ， 丈 需要 进入 顶点 和 碎片 着 色 器 的 世界 一 


在 这 一 章 中 ， 你 会 学 到 如 下 内 容 : 


理解 顶点 和 碎片 着色 器 


` 使 用 抓 取 


实现 玻璃 着 色 吕 


给 2D 游 戏 添加 水 面 着 色 器 


相 比 于 表面 着 色 器 ， 顶 点 和 碎片 着 色 器 基本 上 得 不 到 判断 光线 在 表面 如 何 反 射 所 需 的 物理 属性 信息 。 这 种 着 色 器 在 表现 上 有 


一 些 缺 失 ， 目 然 会 在 某 些 地 方 得 到 补偿 式 的 增强 : 顶点 和 碎片 着 色 器 并 不 受 任何 物理 限制 ， 对 于 某 些 非 真实 特效 而 言 骨 合适 不 
过 。 这 一 草 里 ,我 们 会 主要 关注 一 种 称 为 抓 取 (grab pass) 的 反 术 ， 通 过 这 个 技术 这 些 着 色 器 可 以 模拟 出 一 些 神奇 的 变形 效 


来 。 


6.2 ”理解 顶点 和 碎片 者 色 器 


理解 项 点 和 碎片 着 色 器 的 最 好 方式 是 自己 创建 一 个 。 因 此 这 一 节 里 ,我们 会 展示 编写 这 些 着 色 器 的 方式 。 其 实 很 侧 单 


要 将 一 个 纹理 应 用 到 模型 上 ， 然 后 乘 以 一 个 指定 的 颜色 束 可 以 了 。 如 下 图 所 示 : 





这 里 展示 的 着 色 器 非常 简 


单 ， 可 以 作为 我 们 学 习 顶 点 和 碎片 着 色 器 的 起 点 。 











， 需 要 一 个 新 的 着 色 器 ， 创 建 步骤 如 下 : 
1. 创 建 一 个 新 的 着 色 器 





2. 创 建 一 个 新 材质 ， 然 后 将 看 色 器 指定 给 材质 。 


在 前 面 的 所 有 章 忆 中， 我 们 都 是 用 表面 着 色 器 或 者 在 其 基础 上 做 一 些微 调 
雄 片 着 色 器 有 很 大 不 同 。 我 们 需要 下 面 这 些 修改 : 


在 这 一 节 里 用 不 了 表面 着 色 器 ， 因 为 它 的 结构 与 
1. 删 掉 着 色 器 的 所 有 属性 ， 用 下 面 的 代码 来 蔡 换 : 


Color GBF CGI 


C1 0.0.1)} /7 Red 
MainTex ("Base texture"; 2D) = "white” 者 


2. 删 挥 SubShader 代 码 块 中 的 所 有 代码 ， 用 下 面 的 代码 来 替换 : 


Pass { 
CGPROGRAM 


#pragma vertex vert 
#pragma fragment frag 


half4 Color; 
sampler2D MainTex; 


struct VertInput { 


float4 pos : POSITION; 
float2 texcoord : ITEXCOORDO ; 


}; 


struct vertOutput { 
float4 pos : SV POSITION; 
float2 texcoord : TEXCOORDO ; 


上 


vertOutput vert (vertInput input) f 
vertoOutput o:; 
oO.pos = mul (UNITY MATRIX MVP, input .pos),; 


oO.texcoord = input .texcoord,; 
return oO; 
half4 frag(vertOutput output) : COLOR{ 


half4 mainColour = tex2D( MainTex, output.texcoord),; 
return mainColour * Color; 


ENDCG 


这 也 是 后 续 所 有 顶点 和 碎片 着 色 器 的 基础 。 


6.2.3 ”工作 原理 
顾名思义 ， 顶 点 和 碎片 着 色 器 的 工作 方式 分 为 两 步 : 模型 首先 传递 到 顶点 冰 数 ， 然 后 将 顶 后 通 数 的 运行 结果 作为 碎片 冰 数 的 
输入 。 这 些 消 数 都 是 通过 pragma 指 令 来 完成 的 。 


#pragma vertex vert 


#pragma fragment frag 


在 这 个 例子 里 ， 顶 点 函数 和 碎片 国 数 分 别 为 vert 和 frag。 


从 概念 上 来 讲 ， 碎 片 和 像素 比较 接近 ， 通 常用 来 表示 泻 染 一 个 像素 所 需要 的 一 些 数据 的 集合 。 这 也 是 我 们 通常 将 顶点 和 碎片 
着 色 器 称 为 像素 着 色 器 的 原因 。 


在 着 色 器 中 ， 顶 点 为数 接受 的 输入 结构 是 通过 vertlnput 定 义 的 : 


struct vertInput { 
float4 pos : POSITION ; 
float2 texcoord : TEXCOORDO. 


}; 

这 个 结构 的 名 字 起 得 比较 随意 ， 但 是 内 容 却 是 实打实 的 。struct 的 每 一 个 属性 都 必须 使 用 语义 绑 定 进行 修饰 。 这 是 Cg 的 一 个 
特性 ， 通 过 这 个 特性 我 们 可 以 对 变量 进行 标记 ， 以 便 它们 能 够 使 用 指定 值 进行 初始 化 ， 比 如 法 线 向 量 和 顶点 位 置 等 。 这 里 的 语义 
绑 定 POSITION 表 示 的 是 当 vertinput 传 到 顶点 遂 数 时 ，pos 会 包含 当前 顶点 的 位 置 。 这 与 之 前 的 表面 着 色 器 中 appdata_full 结 构 
的 vertex 属 性 类 似 。 主 要 的 区 别 是 pos 包 含 的 是 模型 坐标 (相对 于 三 维 模 型 的 坐标 ) ， 需 要 对 这 个 坐标 进行 一 些 人 为 的 转换 才 可 
用 (转换 为 相对 于 场景 的 坐标 ) 。 


Os 表面 着 色 器 中 的 顶点 函数 只 是 用 来 修改 模型 的 几何 结构 的 。 在 顶点 和 碎片 着 色 器 中 ， 顶 点 函数 则 是 用 来 将 模型 从 
标 投 影 到 场景 中 去 的 。 


转换 背后 的 数学 原理 已 经 超出 了 本 章 的 范畴 ， 然 而 这 个 转换 可 以 通过 将 pos 乘 以 一 个 Unity 提 供 的 特殊 和 矩阵 来 完成 ， 其 名 为 
UNITY_MATRIX_MVP。 这 个 矩阵 通常 被 称 为 模型 -视图 -投影 矩阵 (model-view-projection matrix) ， 通 过 这 个 基础 矩阵 可 
以 找到 顶点 在 场景 中 的 位 置 。 


vertOutput o,; 
.pos = mul (UNITY MATRIX MVP, input .pos).; 


另外 一 点 初始 化 的 信息 是 textcoord， 它 使 用 了 一 个 名 为 TEXCOORD0 的 语义 绑 定 来 获取 第 一 个 纹理 的 UV 值 。 这 个 变量 值 并 
不 需要 什么 额外 的 处 理 残 可 以 直接 传 给 雁 睛 函数 : 
GexCGoOrd = Input texGoord; 


虽然 Unity 会 帮 我 们 急 始 化 vertiInput， 但 是 我 们 要 上 自己 负责 增 始 化 vertOutput。 除 此 之 外 ， 其 属性 同样 需要 使 用 语义 绑 定 


进行 修饰: 


struct vertOutput { 
float4 Pos : SV POSITION ; 
float2 texcoord : ITEXCOORDO ; 


; 


一 旦 顶点 冰 数 初始 化 了 vertOutput， 其 结构 会 被 传递 给 碎片 立 数 ， 通 过 碎片 消 数 可 以 采样 到 模型 的 主 纹理 ， 并 且 将 其 乘 以 
我 们 提供 的 颜色 。 


回顾 一 下 表面 的 实现 步骤 你 吏 会 友 现 ， 相 比 于 表面 着 色 器 ， 顶 点 和 碎片 看 色 器 并 没有 使 用 材质 的 任何 物理 属性 。 顶 点 和 全 
者 色 器 的 工作 方式 更 加 接近 于 图 像 处 理 器 (GPU) 的 架构 。 


6.2.4 ”更 多 内 容 


顶点 和 碎片 着 色 器 中 最 让 人 困惑 的 是 语义 绑 定 ， 在 某 些 具体 的 上 下 文中 ， 还 可 以 用 很 多 其 他 的 语义 绑 定 。 
输入 语义 


下 表 中 的 语义 绑 定 可 以 用 在 vertinput 中 ， 这 是 Unity 给 顶点 通 数 提供 的 输入 结构 。 使 用 下 面 这 些 语义 修饰 的 属性 会 锐 目 动 初 


始 化 : 


语义 绑 定 
POSIITION, SV_POSITION 
NORMAL 
COLOR, COLOR0, DIFFUSE, SV_ TARGET 
COLOR1, SPECULAR 
TEXCOORDO, TEXCOORDIL “= TEXCOORD:! 


输出 语义 


摘 述 
世界 坐标 下 顶点 的 位 置 
相对 于 世界 (注意 不 是 pa ) 的 项 点 的 法 线 
保存 在 项 点 中 的 颜色 信息 
保存 在 顶点 中 的 二 级 颜色 信息 (通常 是 高 光 ) 
质点 中 保存 的 第 1 个 UV 值 


在 绑 定 语义 的 时 候 ， 也 可 以 绑 定 到 vertOutput 上 ， 只 是 这 时 不 能 保证 属性 会 被 目 动 切 始 化 。 所 以 在 使 用 输出 语义 绑 定 时 ， 
我 们 要 自己 负责 初始 化 这 些 属性 。 编 译 嚣 会 最 大 限度 地 进行 优化 ， 以 保证 它们 使 用 正确 的 数据 进行 初始 化 。 


POSITION, SV POSITION, HPOS 


COLOR,; COLORO; COL0O COL; SV TARGET 
COLOR]1, COLI 

LEXGCOQRDY LEXACOGRDL, sw 
TEXCCOGRBi, TEXI 

WPOS 


窗口 中 的 像 系 位 置 


摘 述 
顶点 在 镜头 坐标 中 的 位 置 (投影 矩阵 ， 每 个 方 回 上 的 


但 者 > 是 0 A ] ) 


亲 色 
六 次 色 


硕 点 中 存储 的 第 i 个 UV 值 


(原点 在 左下 角 ) 


如 果 出 于 某 种 原因 需要 有 某 个 包含 不 同类 型 的 数据 的 属性 的 话 ， 可 以 使 用 一 个 或 者 多 个 TEXCOORD 效 据 对 其 进行 修 希 。 编 译 


器 不 接受 未 修饰 的 属性 。 


6.2.5 参考 


可 以 通过 《NVIDA 参 考 手 册 》 来 了 解 Cg 中 天 于 语义 绑 定 的 内 


容 : http://developer.download.nvidia.com/cg/Cg 3.1/Cg-3.1 April2012 ReferenceManual.pdf。 


6.3 使 用 抓 取 


在 4.3 节 中 ， 我 们 已 经 见 过 了 如 何 让 材质 变 成 透明 的 。 对 于 透明 材质 而 言 ， 虽 然 它们 出 现在 场景 中 ， 但 是 不 会 影响 其 育 后 的 


物体 的 泻 染 ， 因 为 它们 是 透明 的 。 这 也 束 意 味 着 ， 前 面 的 透明 着 色 器 是 无 法 创建 出 一 些 畸 变 效 果 的 ， 
一 样 。 为 了 模拟 这 种 有 轻微 畸变 的 效果 ， 需 要 引入 另外 一 种 拉 术 抓 取 。 通 


束 像 现实 世界 中 的 玻璃 和 水 
过 使 用 抓 取 ， 可 以 访问 屏幕 上 画 出 来 的 所 有 东西 ， 有 了 


这 些 信息 束 可 以 在 着 色 器 中 没有 任何 限制 地 使 用 (或 者 修改 ) 它们 。 为 了 学 习 如 何 使 用 抓 取 ， 我 们 要 创建 一 个 材质 ， 这 个 材质 可 
以 抓 取 到 其 背后 泻 染 的 东西 ， 然 后 在 屏幕 上 将 其 背后 的 内 容 再 次 泻 染 。 这 里 这 个 着 色 器 有 点 矛盾 ， 因 为 我 们 虽然 会 对 它 进 行 几 次 


操作 ， 但 是 展示 出 来 和 之 前 的 透明 着色 器 效果 是 一 样 的 。 


6.3.1 ”准备 工作 


这 一 证 里 需要 准备 下 面 操 作 : 
1. 创 建 一 个 着 色 器 ， 我 们 会 在 后 面 对 其 进行 初始 化 。 
2. 创 建 一 个 使 用 了 该 着 色 器 的 材质 。 


3. 将 该 材质 绑 定 到 某 个 局 平 几 何 体 上 ， 比 如 一 个 四 边 形 。 将 这 个 几何 体 放 置 在 一 些 其 他 的 物体 前 面 ， 让 它 挡住 后 面 的 东西 。 
而 在 我 们 写 好 着 色 器 代码 之 后 ， 这 个 四 边 形 会 是 透明 的 。 


6.3.2 “操作 步骤 


要 使 用 抓 取 ， 需 要 下 面 这 些 步 又: 
1. 删 除 Properties 部 分 ， 这 个 着 色 器 不 需要 任何 属性 。 
2. 在 Subshader 部 分 ， 添 加 抓 取 代码 : 


GrabPass{ |} 


3. 在 抓 取代 码 忆 后， 需要 添加 下 面 的 通行 代码 : 


Pass { 

CGPROGRAM 
#pragma vertex vert 
#pragma fragment frag 
#include "UnityCG.cginc" 


sampler2D GrabTexture,; 


struct vertInput { 
float4 vertex : POSITION ; 


struct vertOutput { 
float4 vertex : POSITION ; 
float4 uvgrab : TEXCOORD].; 


} 


// Vertex function 

vertInput vert (vertexInput v) { 
vertexOutput oOo; 
OQ.vertex = mul (UNITY MATRIX MVP, Vv.vertex); 
O.uvgrab = ComputeGrabScreenPos (oOo.vertex).; 
return oO-; 


} 
// Fragment function 
half4 frag(vertexOutput i) : COLOR { 


fixed4 col = 七 BeX2DPro] (_ GrabTexture, UNITY PROU COORD (1. 
UVdrab) ) ; 
return col + halLt4(0.5 0 0 0) ， 


| 


ENDCG 


6.3.3 ”工作 原理 


这 一 世 里 不 仅 引 入 了 抓 取 通 行 ， 还 引入 了 顶点 和 碎片 着 色 器 。 基 于 这 个 原因 ， 我 们 首先 仔细 看 看 这 个 着 色 器 。 

到 现在 为 止 ， 所 有 的 代码 都 是 直接 放 在 SubShader 部 分 的 。 这 是 因为 前 面 写 的 着 色 器 只 需要 一 种 通行 方式 ， 而 这 次 需要 两 
种 通行 方式 。 第 一 个 是 抓 取 通行 ， 简 单 地 使 用 GrabPass{) 方 法 进行 了 定义 ， 其 余部 分 的 代码 都 放 在 第 二 个 通行 中 ， 也 残 是 Pass 
代码 块 中 。 

第 二 个 通行 尔 数 与 6.2 忆 中 的 着 色 器 代码 并 没有 什么 本 质 上 的 区 别 。 我 们 使 用 了 顶点 遂 数 vert 来 得 到 顶点 的 位 置 ， 然 后 在 伴 
片 阔 数 frag 中 给 它 央 了 一 种 颜色 。 不 同 乙 处 在 于 vert 冰 数 还 计算 了 另外 一 个 重要 的 细节 : 抓 取 通行 的 UV 值 。 抓 取 通 行 会 目 动 创 
建 一 个 纹理 ， 这 个 纹理 可 以 通过 下 面 的 方式 引用 : 


sampler2D GrabTexture; 


为 了 采样 这 个 纹理 ， 我 们 需要 其 UV 值 。 这 里 可 以 用 ComputeGrabScreenPos 函 数 的 返回 数据 来 在 后 面 正 确 采 样 到 抓 取 纹 
理 的 值 。 这 个 过 程 是 在 碎片 着 色 器 中 使 用 下 面 一 行 代码 实现 的 : 


fixed4 col = tex2Dpro]j]( GrabTexture, UNITY PROYJ COORD(1 .uvgrab) ) ; 


这 是 抓 取 纹理 的 一 种 标准 方式 ， 通 过 这 种 方式 可 以 将 抓 取 之 后 的 纹理 按照 正确 的 位 置 应 用 在 屏幕 上 。 如 果 前 面 步 又 都 正确 的 
话 ， 这 个 着 色 器 只 是 简单 地 将 其 背后 显示 的 东西 拷贝 了 一 份 然 后 显示 出 来 。 在 6.4 节 和 6.5 三 ， 我 们 可 以 看 到 如 何 通 过 这 种 技术 来 
制作 出 漂亮 的 玻璃 和 水 的 效果 。 


6.3.4 ”更 多 内 容 


每 次 使 用 市 有 GrabPass(} 的 材质 时 ，Unity 都 需要 将 屏幕 泻 染 成 一 个 纹理 。 这 个 操作 是 需要 很 昂贵 的 代价 的 ， 也 束 是 说 游戏 
中 使 用 抓 取 通 行 的 次 数 是 有 限 的 。Cg 还 提供 了 另外 一 个 变种 : 


GrabPass {"TextureName"} 


通过 这 行 代码 ， 可 以 给 纹理 指定 一 个 名 字 。 但 是 即便 如 此 ， 所 有 使 用 了 这 个 名 为 TextureName 的 抓 取 通 行 的 纹理 的 材质 也 
都 是 共享 的 。 这 也 就 是 说 ， 如 果 你 有 10 个 材质 都 用 了 这 个 着 色 器 ，Unity 只 会 做 一 次 抓 取 通 行 ， 然 后 将 采样 得 到 的 纹理 共享 给 所 
有 的 材质 。 这 个 技术 有 一 个 最 主要 的 问题 是 ， 无 汉 堆 蔷 使 用 ， 打 个 比方 ， 如 果 你 的 某 种 玻璃 材质 是 用 这 种 方式 实现 的 ， 是 不 能 一 
有 恒 一 后 地 殷 两 个 玻璃 米 达 到 堆 革 效果 的 。 


6.4 ” 买 现 琢 璃 看 色 器 


玻璃 是 一 种 非常 复杂 的 材料 。 其 实 ， 这 个 材质 在 4.3 节 中 已 经 有 所 涉及 了 。 然 而 之 前 的 玻璃 着 色 器 的 实现 方式 无 法 添加 变形 
效果 。 大 部 分 的 玻璃 都 不 是 完美 平整 透明 的 ， 因 此 当 我 们 透 过 这 些 不 完美 的 玻璃 看 的 时 候 ， 束 会 看 到 一 些 变形 。 这 一 节 我 们 会 教 
你 如 何 做 出 这 些 变形 效果 。 其 育 后 的 实现 灵感 主要 是 结合 顶点 和 磅 片 着 色 器 以 及 抓 取 通行 技术 ， 然 后 对 抓 取 纹 理 进行 采样 ， 再 对 
其 UV 值 做 一 点 修改 来 制作 出 一 些 细微 的 变形 效果 。 下 图 是 一 个 来 自 Unity 标 准 资 源 库 的 例子 ， 它 充分 展示 了 一 个 添加 了 变形 效果 
的 玻璃 的 样子 。 





6.4.1 准备 工作 


这 一 节 所 需要 的 ) 付 备 工 作 和 前 一 节 差 不 多 。 

1. 创 建 一 个 顶点 和 雁 片 看 色 器 ， 可 以 直接 从 前 一 节 中 拷贝 一 个 。 

2. 创 建 一 个 使 用 了 该 看 色 器 的 材质 。 

3. 将 材质 指定 给 一 个 四 边 形 或 者 另外 一 个 局 平 的 几何 体 来 表示 你 想 要 的 玻璃 。 


4. 企 玻璃 后 面 放 氮 乐 西 ， 以 万 便 观察 畸变 效果 。 


6.4.2 ”操作 步骤 


先 来 编辑 顶点 和 侠 卢 着 色 器 : 


1. 在 Properties 代 人 码 块 中 添加 下 面 两 个 参数 。 


MainTex("Base (RGB) Trans (A)", 2D) = "white" {} 
BumpMap ("Noise text", 2D) = "bump" {} 
Magnitude("Magnitude", Range(0;1)) = 0;05 


2. 在 第 二 个 通行 部 分 添加 它们 对 应 的 变量 。 


sampler2D MainTex; 
sampler2D BumpMap; 
float Magnitude,; 


3. 在 输入 和 输出 结构 中 添加 纹理 信息 。 


float2 texcoord : TITEXCOORDO 


4. 将 UV 值 从 输入 转换 到 输出 结构 。 


O.texcoord = Vv.texcoord.; 


5. 使 用 下 面 的 碎片 立 数 。 


half4 frag(vertOutput i) : COLOR |{ 
half4 mainColour = tex2D( MainTex, 1.texcoord); 


half4 bump = tex2D( BumpMap, i.texcoord),; 
half2 distortion = UnpackNormal (bump) .rg,; 


1.UVvgrab.xy += distortion * Magnitude:; 
fxed4 col = tex2Dpro]( GrabTexture,; UNITY PROJ COORD'(1. 


vorab) ) 3 
return ‘GO * 人 SIECO * Colour:; 


| 
6. 这 个 材质 将 会 是 透明 的 ， 因 此 需要 修改 它 在 SubShader 代 码 块 中 的 标签 。 


Tags{ "Queue" = "Transparent" "IgnoreProjector" = "True" 
"RenderType" = "Opaque" | 


7. 现 在 只 剩 下 将 纹理 设置 给 玻璃 了 ， 然 后 使 用 一 个 法 线 映射 来 蔡 换 抓 取 纹 理 。 


6.4.3 ”工作 原理 
这 个 着 色 器 的 核心 是 使 用 了 一 个 抓 取 通行 来 得 到 已 经 演 染 在 屏幕 上 的 东西 。 而 畸变 是 友 生 人 在 雁 片 函数 中 的 。 在 这 里 我 们 解压 
了 一 个 法 线 映 射 ， 然 后 用 解压 之 后 的 法 线 映射 来 对 抓 取 纹 理 的 UV 值 进 行 了 一 些 偏 移 。 


half4 bump = tex2D( BumpMap, 1.texcoord).,， 
half2 distortion = UnpackNormal (bump) .rg,; 


1.uvgrab.xy += distortion * Magnitude:; 


_Magnitude 滑 块 是 用 来 决定 畸变 效果 的 强度 的 。 


6.4.4 ”更 多 内 容 


这 个 效果 非常 基础 ， 它 首先 是 抓 取 到 了 屏幕 ， 然 后 在 抓 取 到 的 内 容 的 基础 上 ， 按 照 法 线 映射 做 了 一 些 畸 变 效 果 。 这 个 技术 非 
常 强大 ， 可 以 用 它 做 很 多 有 趣 的 事情 。 很 多 游戏 在 爆炸 和 其 他 科幻 设备 处 会 添加 一 些 畸 变 效 果 。 这 个 材质 也 可 以 用 在 球体 上 ， 换 
一 个 法 线 映 射 ， 就 可 以 完美 地 模拟 爆炸 时 的 热能 冲击 波 。 


6.5 ”给 2D 洲 戏 江 加 水 面 看 色 器 


上 一 节 介 绍 的 琢 璃 痢 色 器 是 静态 的 ， 也 残 是 况 其 畸变 是 不 会 随时 间 变 化 的 。 我 们 只 需要 稍 加 改动 ， 换 几 个 参数 碱 能 让 畸变 效 
果 动 起 来 。 对 于 2D 游 戏 而 言 ， 这 非常 适合 用 来 制作 水 面 效 果 。 这 一 节 我 们 会 用 一 个 和 5.3 节 中 比较 类 似 的 技术 。 





6.5.1 ”准备 工作 


一 节 还 是 基于 6.3 刷 的 内 容 扩 展 出 来 的 ， 因 为 主要 的 操作 都 是 依赖 于 抓 取 通 行 功能 的 。 


xf 


1. 创 建 一 个 新 的 抓 取 通行 着 色 器 ， 你 可 以 目 己 写 一 个 ， 也 可 以 使 用 6.3 节 的 那 一 个 。 

2. 为 着 色 器 创建 一 种 新 材质 。 

3. 将 材质 指定 给 一 个 局 平 几 何 体 ， 这 个 几何 体 用 来 模拟 水 面 。 为 了 让 这 种 特效 生效 ， 可 能 还 需要 在 水 面 后 面 放 点 东西 以 便 观 
察 效果 。 


4. 这 一 节 需 要 一 个 噪声 纹理 ， 用 来 获得 伪 随 机 数 。 因 此 很 重要 的 一 点 是 ， 要 选 一 个 无 颖 的 噪声 纹理 。 典 型 的 例子 是 无 颖 二 维 
Perlin 噪 声 ， 如 下 图 所 示 。 使 用 无 颖 噪声 可 以 确保 在 将 材质 用 到 某 个 很 大 的 物体 上 时 ， 会 看 到 一 些 奇怪 的 跳 变 点 。 为 了 让 这 个 效 
果 生 效 ， 纹 理 需 要 使 用 Repeat 模 式 导 入 。 如 果 你 想 让 水 面 看 起 来 平滑 并 且 连 续 ， 还 需要 通过 Inspector 标 签 页 将 其 设置 为 
Bilinear。 这 些 设置 可 以 确保 着 色 器 能 正确 地 采样 纹理 。 





6.5.2 ”操作 步骤 


要 创建 这 种 动画 效果 ， 需 要 从 修改 着色 器 代码 开始 。 步 又 如 下 : 


1. 添 加 下 面 属性 : 


NoiseTex("Noise text", 2D) = "white" {} 
Gobour OolLeone", 和 Ly 


.Period ("Period"; Range(0;50)) = 1 


Magnitude ("Magnitude", Range {90,0.5))} = 0.05 
Scale ("Scale", Range(0,10)) 1 


2. 在 着 色 器 的 第 二 个 通行 部 分 添加 属性 对 应 的 变量 。 


sampler2D NoiseTex; 
fixed4 Colour.; 


float Period; 
float Magnitude; 
float Soalp; 


页 操 背 数 定义 下 面 的 输出 结构 。 


struct vertInput 1 
float4 vertex : POSITION ; 
fixed4 color : COLOR ; 
float2 texcoord : IEXCOORDO ; 


float4 worldPos : TEXCOORD!].; 
float4 uvgrab : TEXCOORD2; 


和 


4 该 着 色 器 需要 知道 空间 中 每 个 碎片 的 具体 位 置 。 要 做 到 这 一 点 ， 需 要 给 顶点 函数 添加 下 面 一 行 代码 : 
czsworlLdpog = mul( OQbject2Worild; Vvertex); 


5. 使 用 下 面 的 碎片 立 数 。 


fixed4 frag (vertInput i) : COLOR | 
float sinT = sin( Time.w / Period) ; 
ff leat2 dLiEtortion = Float2( 
tex2D( NoiseTex, 1i.worldPos.xy 是 . SCale 二 float2 (sinT; 0) ) is ~ 
0:, 5; 
tex2D( NoiseTex, 1.worldPos .xy 4 Scale + float2(0; sinT) }:r 
- 0.5 


1.uvgrab.xy += distortion * Magnitude; 


fixed4 col = tex2Dproj( GrabTexture, UNITY PROY COORD'(1. 
uvgrab) ) ; 


returm Sel 2 “Cole 


6.5.3 ”工作 原理 


这 个 着 色 器 与 6.4 书 中 的 着 色 器 比较 类 似 。 主 要 的 区 别 是 这 是 一 个 动态 的 材质 ， 这 里 的 显示 并 不 是 根据 一 个 法 线 映射 生成 
的 ， 而 是 考虑 了 当前 的 时 间 因 素 ， 以 此 来 达到 其 实时 变化 的 效果 。 显 示 抓 取 纹 理 UV 值 的 代码 看 起 来 非 单 之 复杂 ， 我 们 来 试 着 理 
解 一 下 。 这 部 分 代码 育 后 的 想法 是 使 用 正弦 阔 数 来 让 水 面 振动 起 来 。 这 个 效果 需要 考虑 时 间 因 素 才 能 做 到 ， 因 此 看 色 器 产生 的 畸 
变 效 果 依赖 于 当前 的 时 间 ， 而 当前 时 间 是 通过 内 建 变量 Time 获 取 的 。_Period 变 量 则 决定 了 正弦 阔 数 的 时 间 段 ， 也 就 是 波 的 速 


t+ 
So 


float2 distortion = float2( sin( Time.w/ Period), sin( Time.w/ Period) 
二 


这 个 代码 的 问题 是 x 和 Y 方 向 显示 成 一 样 的 。 结 果 束 是 整个 抓 取 纹理 会 按照 圆周 运动 旋转 ， 看 起 来 根本 不 像 是 水 。 我 们 需要 
在 这 个 规律 的 圆周 运动 基础 上 添加 一 些 随机 因素 。 


给 着 色 器 添加 随机 行为 最 通用 的 办 法 丈 是 引入 噪声 纹理 。 所 以 现在 的 问题 变 成 了 如 何在 看 似 随 机 的 位 置 上 对 纹理 进行 采样。 
为 了 避免 出 现 明显 的 跳 变 ， 最 好 的 万 式 是 使 用 正弦 波 来 作为 噪声 纹理 的 UV 值 的 偏 移 。 


float sinT = sin( Time.w / Period); 

float2 distortion = float2 

( tex2D( Noiselex; ltexcoord / Secale + Eloat2(s1inT; 0) }) sr = Qs5' 
tex2D( NoiseTex, 1.texcoord pg Soale: 4 float2(0, snT) } .EE = 0.5 

) 


这 里 的 _scale 变 量 决定 了 波 的 大 小 。 这 个 办 法 比较 接近 最 后 的 版 本 ， 但 是 还 有 一 个 严重 的 问题 : 如 果 表示 水 面 的 四 边 形 移动 
的 话 ，UV 值 会 跟 背 它 一 起 变化 ， 也 融 是 你 会 看 到 水 流 仍 然 是 跟 痢 材质 的 ， 而 不 是 与 其 背景 融 为 一 体 。 为 了 解决 这 个 问题 ， 需 要 
使 用 当前 碎片 的 世界 坐标 来 作为 UV 值 的 初始 位 置 坐标 。 


float sinT = sin( Time.w / Period) ; 
float2 distortion = float2 
( tex2D( NoiseTex, i.worldPos.xy / Scale + float2(sinT, 0) ).r - 
0 .5 

tex2D( NoiseTex, i.worldPos.xy / Scale + float2(0, sinT) ).r - 
D5 


于 - 


1L.UVgrzab .xy += distortion * Magnitude; 
有 了 上 面 这 些 代码 ， 最 后 会 做 出 一 个 非常 好 看 的 连续 的 畸变 效果 ， 这 个 效果 并 不 会 沿 着 某 个 明显 的 方向 移动 。 


Os 我 们 这 里 提 到 的 模拟 玻璃 和 水 面 的 技术 ， 并 不 是 最 完美 的 解决 方案 。 你 可 以 在 这 一 节 的 水 面 效果 的 基础 上 反复 调 
试 ， 直 到 找到 一 个 符合 你 的 游戏 风格 的 效果 为 止 。 


第 7/ 草 ”移动 闹 着 色 器 优化 


接 下 来 的 两 个 草书 我 们 将 会 学 习 如 何 针对 不 同 的 平台 编写 表现 友好 的 着 色 器 。 我 们 不 会 专门 讨论 某 个 平台 ， 而 是 为 了 移动 端 
的 优化 把 着 色 器 的 元 素 拆 开 ， 使 它 在 通用 的 平台 上 更 有 效率 。 具 体 来 说， 内 容 涉及 从 理解 如 何 使 用 Unity 的 内 置 变量 减少 内 存 开 
销 到 学 习 如 何 使 代码 更 有 效率 。 在 这 一 章 中 ， 你 会 学 到 如 下 内 容 : 


移动 平台 上 的 着 色 器 修改 


优化 看 色 器 是 你 制作 任何 游戏 都 会 遇 到 的 问题 。 我 们 在 游戏 制作 中 都 会 达成 一 个 共识 ， 残 是 需要 优化 看 色 器 或 者 说 使 用 更 少 
的 纹理 来 实现 同样 的 效果 。 作 为 一 个 技术 人 员 或 者 着 色 器 的 开 友 人 员 ， 你 必须 知道 着 色 器 优化 的 核心 知识 ， 这 样 才能 在 保持 视 完 
通 真 的 基础 上 提高 游戏 性 能 。 有 了 这 些 知识 ， 你 人 在 开始 编写 着 色 器 的 时 候 会 有 意识 地 做 一 些 改变 ， 比 如 把 float 都 改 成 half 或 者 
fixed， 把 光照 亢 数 的 癌 量 都 变 成 half 等 。 还 有 很 多 其 他 的 因素 会 影响 你 的 痢 色 器 在 目标 设备 上 的 运行 效率 ， 下 面 我们 来 一 起 学 
习 如 何 优化 着 色 器 。 


7.2 ”什么 是 轻 量 着 色 器 


当 第 一 次 被 问 到 什么 是 轻 量 着 色 器 时 ， 可 能 有 后 难以 回答 ， 因 为 提升 着 色 器 的 效率 是 由 多 个 因素 共同 决定 的 。 可 能 是 由 于 使 
用 变量 时 的 内 存 消 冰 过 大 ， 也 可 能 是 因为 使 用 纹理 数量 过 多 ， 还 有 可 能 是 着 色 器 本 身 运行 效率 较 遍 等。 我们 可 以 通过 简单 代码 或 
者 数据 达到 事半功倍 的 效果 。 在 本 证 中 ， 我 们 会 讨论 一 些 万 法 并 将 它们 结合 在 一 起 ， 使 你 的 着 色 器 更 加 快捷 高 效 ， 从 而 可 以 制作 
出 众望 所 归 的 高 品质 视 党 效果 ， 不 绾 是 PC 辛 还 是 移动 端 。 


7.2.1 ”准备 工作 


在 开始 学 习 本 节 之 前 ， 我 们 需要 准备 一 些 资 源 。 

1. 创 建 一 个 新 场景 ， 在 场景 中 创建 一 个 简单 的 球体 和 一 个 平行 光 。 
2. 创 建 一 个 新 的 着 色 器 和 材质 ， 并 将 着 色 器 指定 给 材质 。 

3. 将 材质 附加 a 到 刚才 创建 的 球体 上 ， 它 已 经 放 在 场景 中 了 。 


4. 最 后 修改 着 色 器 ， 使 它 能 够 使 用 一 个 漫 反射 纹理 、 一 个 法 线 贴图 以 及 目 定 义 的 光照 冰 数 。 


Shader "Cookbookychaptezr08/yOptimized5hader001” 
{ 
Properties 


{ 
MainTex {"Base {RGB)", 2D) = "white™ {} 
_NormalMap ("Normal Map”, 2D) = "bump" {]} 
} 


SubShader 

{ 
Tagsa { "RenderType"="Opaogue” ) 
LOD 200 


COGPR 
2 T 


#pragma surface surf SimpleLambert 


sampler2D MainTex; 
sampler2D NormalMap; 


struct Input 


1 


float2 uv MainTex; 
float2 uv NormalMap; 
Fs 
inline float4 LightingSimpleLambert (SurfaceOutput 3, float3 lightDir, float atten) 


{ 
float diff = max (0, dot (3s3.Normal, lightDir))， 


float4 c; 

c.rgb = S.Albedo * LightColorD0 .rgb * {diff * atten * 2); 
c.a = 3.Alpha; 

return cc; 


} 


void surf (Input IN, inout Surfaceoutput o) 


{ 
float4 c = tex2D {( MainTex, IN.uv MainTex)}); 


oO.Albedo = C.Tgby; 

o.Alpha = c.a; 

Do. Normal = UnpackNormal {tex2D!{ NormalMap, IN.uv NormalMap)); 
} 
ENI | 


} 
FallBack "Diffuse”" 


下 图 显示 了 我 们 在 步 又 1 中 创建 的 场景 修改 之 后 的 效果 。 
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Preview 





你 的 场景 设置 应 该 看 起 来 和 上 图 一 样 。 我 们 看 一 下 在 Unity 中 优化 表面 着 色 器 时 的 一 些 基本 概念 。 








我 们 通过 一 个 简单 的 漫 反 射 着 色 器 来 展示 通 弟 用 哪些 办 法 来 优化 着 色 器 。 


首先 优化 变量 类 型 ， 使 它们 在 处 理 数 据 时 占用 更 少 的 内 存 。 


1. 从 Input 结 构 体 开始 ， 目 前 UV 存储 在 一 个 float2 类 型 的 变量 中 ， 需 要 将 它 修 改 成 half2。 


struct Input 
{ 


half2 uv MainTex; 
half2 uv NormalMap; 


}? 
2. 然 后 看 一 下 光照 函数 ， 为 了 降低 变量 的 内 仓 使 用 ， 我 们 按照 如 下 代码 修改 光照 六 数 中 的 变量 类 型 。 


inline fixed4 LightingSimpleLambert (SurfaceOutput s, fixed3 lightDir, fixed atten) 
{ 
fixed diff = max (0, dot (s.Normal, lightDir)); 


fixed4 c; 

GsrgD = SiAlDbedo * LightGColorUsrgbh * {difi > atten * 2)7 
c.a = S.Alpha; 

return c; 


3. 最 后 ， 通 过 在 surf () 尔 数 中 更 新 这 些 变 量 完 成 优化 过 程 。 


void surf (Input IN, inout SurfaceOutput o) 

{ 
fixed4 c = tex2D ( MainTex, IN.uv MainTex); 
oO.Albedo = c.rgab; 


0O.Alpha = c.a; 
oO.Normal = UnpackNormal (tex2D( NormalMap, IN.uv NormalMap) ) ; 


现在 我 们 已 经 将 变量 类 型 优化 好 了 ， 接 下 来 将 充分 利用 内 置 的 光照 模型 变量 来 控制 光照 在 着 色 器 中 的 处 理 过 程 。 做 完 这 些 ， 
束 可 以 在 着 色 器 处 理 过 程 中 极 大 地 减少 光照 的 数量 。 参 照 下 面 的 代码 修改 #pragma 声 明 : 


mL 
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通过 法 线 贴 图 和 漫 反 射 纹理 共享 UV 来 进一步 实现 优化 。 为 了 实现 这 一 点 ， 在 UnpackNormal () 水 数 中 使 用 MainTex 的 
UV 替代 了 NormalMap 的 UV。 


| 
oO.Alpha = c.a; 
oOo.Normal = UnpackNormal (tex2D( NormalMap, IN.uv MainTex)); 


4. 因 为 我 们 已 经 没有 对 法 线 贴图 UV 的 需求 了 ， 所 以 需要 确保 在 Input 结 构 体 中 去 除法 线 贴 图 的 UV。 


aCtruct Lnput 
| 


half2 uv Diffuse; 
上 


5. 最 后 ， 只 开局 某 些 特定 的 泻 染 工作 ， 进 一 步 优化 着 色 器 。 


CGPROGRAM 
#pragma surface surf SimpleLambert excl1i 


从 着 色 器 最 后 的 优化 结果 可 以 看 出 ， 在 视觉 质量 上 几乎 没什么 差异 ， 但 是 确实 减少 了 着 色 器 泻 染 到 屏幕 上 的 时 间 。 我 们 会 在 
下 一 节 学 习 如 何 检测 着 色 器 泻 染 至 屏幕 的 时 间 ， 但 是 


是 这 里 需要 注意 的 是 ， 我 们 是 用 最 小 的 数据 达到 了 同样 的 效果 ， 在 创建 看 色 器 
的 时 候 要 记 住 这 一 点 。 下 图 展示 了 着 色 器 的 最 终 效 果 : 





现在 我 们 已 经 知道 优化 着 色 器 的 一 些 办 法 ， 本 小 书 继 续 深 入 以 便 真正 掌握 它们 的 工作 原理 ,然后 册 看 看 你 目 己 可 以 尝试 的 一 
些 其 他 技术 。 


我 们 首先 来 关注 一 下 声明 每 个 变量 时 数据 类 型 的 存储 大 小 ， 如 果 你 熟悉 4 


熟悉 编程 ， 应 该 知道 声明 的 变量 类 型 占用 不 同 的 内 存 大 
小 。float 类 型 占用 的 内 存 最 大 ， 下 面 来 看 一 下 各 数据 类 型 的 具体 细节 : 
` float: 完整 的 32 位 单 精 度 的 数据 类 型 ， 是 三 个 类 型 中 最 慢 的 ， 同 时 对 应 的 坐标 类 型 为 loat2、float3、float4。 
half: 低 精 度 的 16 位 浮 点 类 型 ， 适 合 存 放 UV 值 、 闫 色 值 ， 比 float 快 得 多 ， 相 似 的 坐标 类 型 还 有 half2、half3、half4。 


fixed: 是 三 个 类 型 中 最 小 的 ， 可 以 用 于 光照 计算 、 颜 色 ， 同 样 还 有 坐标 类 型 fxed2、fixed3、fixed4。 


我 们 对 着 色 器 的 下 一 步 优化 是 在 #pragma 中 声明 noforwardadd 值 。 它 像 一 个 开关 ， 会 自动 告诉 Unity 这 个 着 色 器 在 每 个 像 
素 只 接收 一 个 平行 光 。 着 色 器 中 任何 其 他 类 型 的 光照 计算 都 会 在 Unity 内 部 使 用 球 谐 光照 值 进行 逐个 像素 的 处 理 。 我 们 在 场景 中 


再 摆 放 一 个 平行 光 对 球体 进行 照明 残 可 以 很 明显 地 看 出 来 区 别 了 ， 这 是 因为 看 色 器 使 用 法 绪 贴 图 的 过 程 是 一 个 逐个 像素 的 操作 。 


这 样 的 操作 是 很 有 用 的 ， 但 是 如 果 你 的 场景 中 有 多 个 平行 光 ， 想 要 其 中 的 一 个 平行 光 作 为 主要 的 像素 光源 该 如 何 实现 呢 ? 这 
并 不 是 很 难 ， 注 意 到 每 个 光源 都 有 一 个 Render Mode 下 拉 菜 单 ， 单 击 它 就 可 以 看 到 一 些 可 以 设置 的 标签 一 Auto、1lmportant 和 
Not Important。 选 择 Important 认 为 是 像素 光源 ， 选 择 Not Important 则 会 认为 是 顶点 光源 ， 如 果 选 择 Auto，Unity 会 自动 选 


择 最 佳 光源 。 
放置 另外 一 个 点 光源 ， 移 除 着 色 器 当前 的 主 纹理 。 你 会 发 现 第 二 个 点 光源 并 没有 对 法 线 贴图 产生 任何 作用 ， 而 只 有 第 一 个 平 
行 光 起 作用 了 。 基 本 思路 丈 是 通过 只 计算 所 有 额外 光源 的 项 点 光照 来 达到 书 省 每 个 像素 的 操作 ， 以 及 通过 计算 主 平行 光 的 逐个 像 


泰 光照 来 提升 性 能 。 下 图 清晰 地 展示 了 这 个 实现 原理 ， 可 以 看 到 点 光源 不 会 对 法 线 贴 图 产生 任何 影响 。 


单一 平行 光 光 源 
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着 色 需 中 使 用 moforwardadd 二 句 之 后 的 效果 图 





最 后 ， 我 们 又 做 了 一 些 简化 ， 告 诉 法 线 贴图 简单 地 使 用 主 纹理 的 UV 值 ， 而 县 我 们 在 处 理 这 行 代码 时 ， 还 省 略 了 专门 为 法 线 


贴图 提供 一 套 UV 值 。 这 是 一 种 简化 代码 并 且 清 除 不 必要 的 数据 的 很 好 的 办 法 。 

我 们 还 在 #pragma 表 达 式 中 加 入 了 exclude pass: prepass 声 明 ， 这 样 着 色 器 就 不 会 接受 任何 来 自 延迟 演 染 的 自 定义 光照 
了 。 这 也 意味 着 我 们 可 以 在 主 镜头 中 将 着 色 器 设置 成 只 在 前 向 着 色 器 中 有 效 。 

通过 花费 少量 时 间 ， 你 将 会 对 着 色 器 优化 的 程度 感到 惊讶 。 你 已 经 见 过 如 何 把 灰 度 图 放 入 一 个 RGBA 纹 理 ， 以 及 如 何 使 用 一 


还 有 很 多 方法 可 以 用 来 优化 着 色 器 ， 所 以 如 何 优化 着 色 器 一 直 是 一 个 模 核 两 可 的 问题 ， 但 是 知道 这 些 技术 的 


个 纹理 来 模拟 光影 。 
行 沅 畅 ， 帧 速 稳定 。 


原理 ， 你 束 可 以 为 自己 的 平台 量 身 打 造 一 些 合适 的 着 色 器 ， 使 你 的 着 色 器 运 


现在 我 们 已 经 知道 着 色 器 需要 及 取 怎样 的 措施 来 减少 开销 ， 再 来 看 看 如 何 找到 着 色 器 性 能 损失 的 问题 所 在 ,假如 在 你 的 场景 


中 同时 运行 着 很 多 着 色 器 、 游 戏 对 象 、 脚 本 。 在 整个 游戏 当中 找到 单一 的 物体 或 单一 的 着 色 器 是 一 件 令 人 生 情 的 工作 ， 但 是 
Unity 为 我 们 提供 了 内 置 的 性 能 分 析 器 。 它 使 我 们 能 够 逐 帧 地 查看 游戏 中 发 生 的 事情 ， 并 且 让 我 们 看 到 所 使 用 的 GPU 和 CPU 的 每 
一 个 部 件 。 


使 用 Unity 性 能 分 析 器 ， 可 以 通过 接口 来 创建 分 析 任 务 从 而 分 离 出 单一 的 部 件 ， 比 如 着 色 器 、 几 何 体 、 普 通 演 染 对 象 。 我 们 
可 以 饰 选 这 些 对 象 ， 直 到 看 到 单一 物体 的 性 能 显示 。 这 使 我 们 能 够 在 物体 运行 相应 功能 的 时 候 ， 看 到 它 在 GPU 和 CPU 上 的 显示 
效果 。 


我 们 来 看 一 下 分 析 器 的 不 同 组 件 ， 并 且 学 习 如 何 对 场景 特别 是 着 色 器 进行 调试 。 


为 了 讲解 Unity 性 能 分 析 器 的 使 用 ， 需 要 准备 几 个 资源 并 且 需 要 打开 Profiler 窗 口 。 
1. 使 用 上 一 节 提 供 的 场景 ， 通 过 Windowl|Profiler 或 者 使 用 快捷 键 Ctrl+7 打 开 性 能 分 析 器 。 
2. 再 一 次 复制 两 个 球体 对 象 ， 看 一 下 它们 是 如 何 影响 演 染 的 。 


你 应 该 会 看 到 下 面 的 界面 : 
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使 用 性 能 分 析 器 之 前 ， 我 们 先 看 一 下 该 窗口 中 的 一 些 UI 元 素 。 在 单 击 play 按 钮 之 前 ， 先 了 解 一 下 如 何 使 用 性 能 分 析 器 来 得 到 
我 们 想 要 的 信息 : 


1. 首 先 ， 单 击 Profiler 性 能 窗口 中 的 CPU Usage、GPU Usage 和 Rendering 模 块 。 它 们 在 窗口 的 左上 方 ， 如 下 图 所 示 : 
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使 用 这 些 模块 ， 我 们 可 以 看 到 游戏 主要 功能 的 不 同 数据 的 细节 。CPU Usage 模 块 显示 了 大 多 数 脚 本 的 执行 情况 ， 如 物理 系 
统 和 整体 的 泻 染 等 。GPU Usage 模 块 提供 了 关于 光照 、 阴 影 和 泻 染 队列 的 元 素 的 详细 信息 。Rendering 模 块 提供 了 场景 中 任意 
一 帧 的 绘制 细节 和 几何 体 的 数量 等 。 


单 击 每 个 模块 ， 残 可 以 将 性 能 分 析 会 话 期 间 我 们 所 看 到 的 数据 类 型 隔离 开 来 。 
2. 现 在 ， 单 击 这 些 Profile 模 块 中 的 彩色 小 万 块 ， 并 单 击 play 按 钮 或 者 使 用 快捷 键 Ctrl+P 运 行 场景 。 


这 样 我 们 可 以 更 深入 地 了 解 性 能 分 析 会 话 ， 从 而 可 以 过 滤 反 馈 的 具体 内 容 。 在 场景 的 运行 状态 下 ， 把 GPU Usage 模 块 中 除 
Opaque 之 外 的 万 块 全 部 取消 挥 ， 现 在 束 可 以 只 天 注 泻 染 队 列 被 设置 为 Opaque 时 所 使 用 的 时 | 间 了 。 





3.Profiler 窗 口 的 男 一 个 高 级 功能 是 图 表 区 域 的 点 击 和 拖 蝶 行为 。 这 会 目 动 暂 停 游 戏 ， 这 样 你 就 可 以 进一步 分 析 里 面 的 峰 
值 ， 找 出 究竟 是 什么 影响 了 画面 性 能 。 在 图 表 区 域内 点 击 和 拖 岛 以 暂停 游戏 ， 然 后 看 看 产生 的 效果 : 
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4. 现 在 ， 我 们 把 注意 力 转移 到 窗口 的 下 半 部 分 ， 你 会 注意 到 ， 当 选择 GPU Usage 模 块 时 会 有 一 个 可 用 的 下 拉 菜 蛙 。 我 们 将 
它 展 开 来 获得 天 于 当前 活动 的 性 能 分 析 会 话 更 多 的 细节 信息 。 在 本 例 中 ， 可 以 得 到 当前 镜头 的 泻 染 内 容 以 及 泻 染 耗 时 : 
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这 让 我 们 在 处 理 某 个 特定 帧 时 能 够 观察 到 Unity 的 内 部 工作 过 程 。 在 本 例 中 ， 我 们 可 以 看 到 ， 使 用 着 色 器 优化 后 的 三 个 小 球 
厅 至 屏幕 上 大 约 需要 0.14 晕 秒 ， 它 们 调用 了 7 个 drawcall， 并 且 这 个 过 程 占 用 每 帧 CPU 时 间 的 3.1%。 这 种 类 型 的 信息 可 以 帮助 





我 们 诊断 和 解决 着 色 器 市 来 的 性 能 问题 。 我 们 进行 一 个 测试 ， 给 看 色 器 新 加 一 个 纹理 并 用 lerp 阔 数 把 两 个 漫 反 射 纹理 混合 。 你 将 
在 性 能 分 析 器 中 非常 清楚 地 看 到 其 中 的 效果 。 


5 .修改 着 色 器 中 的 Properties 代 码 块 ， 添 加 另外 一 个 纹理 来 供 后 面 使 用 ， 如 下 代码 所 示 : 


Properties 

{ 
MainTex ( Base (RGB)", 2D) = "white"” {} 
BlendTex ("Blend Texture", 2D) = "white"” {)} 
NormalMap ("Normal Map", 2D) = "bump” {} 


6. 在 CGPROGRAM 语 句 中 使 用 对 应 的 纹理 : 


sampler2D MainTex; 
sampler2D BlendTex; 
sampler2D NormalMap; 


7. 现 在 对 surf () 函数 进行 修改 ， 以 混合 两 个 漫 反 射 纹理 : 


void surf (Input IN, inout SurfaceOutput 0o) 


{ 
fixed4 c = tex2D ( MainTex, IN.uv MainTex); 
fixed4 blendTex = tex2D ( BlendTex, IN.uv MainTex); 
c = lerpl(c, blendTex, blendTex.r); 
oO.Albedo = c.rgb; 


oOo.Alpha = c.a; 
oO.Normal = UnpackNormal (tex2D( NormalMap, IN.uv MainTex)); 


修改 完 着 色 器 之 后 ， 保 存 并 返回 到 Unity 编 辑 器 ， 我 们 就 可 以 运行 游戏 并 看 看 新 着 色 器 增加 的 毫秒 数 了 。 返 回 Unity 窗 口 ,， 单 
击 play， 观 察 Profiler 窗 口中 产生 的 结果 : 
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可 以 看 到 场景 中 的 Opaque 着 色 器 演 染 所 用 的 时 间 从 0.14 富 秒 增加 到 了 0.179 毫 秒 。 由 于 添加 了 另 一 个 纹理 并 使 用 了 
lerp () 六 数 ， 因 此 球体 增加 了 泻 染 时 间 。 虽 然 是 很 微小 的 变化 ， 但 想象 一 下 如 果 场 景 中 有 20 个 着 色 器 以 不 同 的 运行 方式 作用 人 在 
不 同 物 体 上 ， 时 间 残 相当 可 观 了 。 


使 用 这 里 提供 的 信息 ， 我 们 可 以 很 快 找 出 导致 性 能 快速 下 降 的 关键 因素 并 使 用 前 面 提 人 到 的 相关 知识 来 解决 这 些 间 题 。 


尽管 摘 述 这 个 工具 内 部 的 实际 工作 原理 已 经 完全 超出 了 本 书 的 范畴 ， 但 我 们 可 以 推断 Unity 在 游戏 运行 时 为 我 们 提供 了 一 个 
查看 计算 机 性 能 的 方式 。 这 个 性 能 分 析 窗 口 基本 上 是 与 CPU 和 GPU 非常 紧密 地 联系 在 一 起 的 ， 它 为 我 们 提供 了 大 量 实 时 的 反馈 
言 息 ， 包 括 每 个 脚本 、 对 销 、 泻 染 队 列 等 几 个 因素 运行 时 所 占用 的 时 | 间 。 使 用 这 些 信息 ， 我 们 可 以 实时 跟 路 着 色 器 编写 的 效率 来 
消除 问题 和 修改 相应 的 代码 。 


为 移动 辛 平台 提供 性 能 分 析 也 是 可 行 的 。Unity 为 我 们 提供 了 一 组 额外 的 特性 ， 当 Build Settings 的 目标 平台 设置 为 Android 
或 者 iOS 时 ， 我 们 可 以 得 到 游戏 运行 时 移动 设备 的 实时 信息 。 这 是 很 有 用 的 ， 因 为 你 不 用 在 编辑 器 里 分 析 性 能 ， 而 是 直接 在 设备 
中 分 析 。 想 要 了 解 更 多 此 过 程 的 相关 信息 ， 请 参见 Unity 的 文 
档 : http://docs.unity3d.com/Documentation/Manual/MobileProfiling.html,。 


现在 我 们 已 经 学 习 了 一 系列 真正 优化 着 色 器 的 拷 术 ， 下 面 来 看 看 如 何 为 移动 设备 编写 高 质量 的 着 色 器 。 其 实 只 需要 在 着 色 器 
编写 的 时 候 做 一 些 简 日 的 调整 束 可 以 使 它 在 移动 设备 上 运行 得 更 快 。 这 涉及 使 用 approxview 或 者 halfasview 光 照 冰 数 变量 的 元 
素 。 我 们 也 可 以 减少 纹理 的 使 用 数量 ， 甚 至 是 使 用 更 好 的 纹理 压缩 方式 等 。 在 本 节 的 最 后 部 分 ， 我 们 将 得 到 一 个 应 用 在 移动 平台 
游戏 中 经 过 良好 优化 的 法 线 映射 高 光 着 色 器 。 


在 开始 之 前 ,我 们 先 更 新 一 下 场景 中 的 元 素 ， 添 加 一 些 即 将 应 用 到 移动 平台 上 的 对 象 : 
1. 创 建 一 个 新 的 场景 添加 一 个 默认 的 球体 对 象 和 一 个 平行 光 。 
2. 添 加 一 个 着 色 器 和 材质 ， 将 着 色 器 指定 给 材质 。 


3. 最 后 在 场景 中 将 材质 绑 定 到 球体 上 。 


完成 所 有 这 些 步骤 之 后 ， 你 应 该 看 到 类 似 下 面 这 样 的 场景 : 








在 本 节 中 ， 我 们 将 从 零 开 始 编 写 一 个 移动 端 友 好 的 着 色 器 ， 并 且 讨 论 影响 移动 端 着 色 器 的 各 种 因素 : 


1. 首 先 ， 在 Properties 代 码 块 中 添加 所 需 的 纹理 。 在 本 例 中 ， 我 们 将 使 用 一 个 漫 有 反射 纹理 ， 它 的 高 光 贴图 包含 在 其 alpha 通 
道中 ， 再 使 用 一 个 法 线 贴图 以 及 调整 高 光 强 度 的 滑 块 。 


Properties 

{ 
_Diffuse ("Base (RGB) Specular Amount (A)", 2D) = "white” {} 
_SpecIntensity ("Specular Width", Range(0.01, 1)) = 0.5 
NormalMap ("Normal Map", 2D) = "bump"{} 


2. 下 一 个 任务 是 设置 #pragma 声 明 ， 这 只 是 简单 地 对 着 色 器 的 某 些 特性 进行 切换 ， 从 而 使 着 色 器 更 加 轻便 或 者 复杂 : 


3. 然 后 ， 需 要 关联 Properties 代 码 块 和 CGPROGRAM 代 码 块 。 不 过 ， 这 一 次 我 们 将 为 高 光 强 度 滑 块 提供 一 个 fixed 类 型 
来 减少 内 存 使 用 量 : 
sampler2D Diffuse; 


sampler2D NormalMap; 
fixed SpeclIntensity; 


4. 为 了 将 纹理 映射 到 物体 表面 ， 需 要 得 到 一 些 UV 数据 。 在 这 里 ， 仪 仪 使 用 一 组 UV 数据 来 保持 着 色 器 最 小 的 数据 量 : 


Struct Input 


{ 
half2 uv Diffuse; 


}? 


5. 接 下 来 ， 填 元 光照 尔 数 ， 我 们 将 使 用 新 的 #pragma 声 明 所 提供 的 一 些 新 的 输入 变量 : 


A 上 时 
守明 


inline fixed4 LightingMobileBlinnPhong (SurfaceOQutput s, fixed3 lightDir, fixed3 halfDir, fixed atten) 


{ 
fixed diff = max (0, dot {s.Normal, lightDir)); 
fixed nh = max (0, dot {s.Normal, halfDir)); 
fixed spec = pow {nh, s.Specular*128) * s.Gloss; 


fixed4 c; 

orgqb = S.Abede < ,LightGolorgd TGS dit 4 .BighteolLord. rgqb * Speec}y 二 (atten*2}y 
Cea = O00 

return cs;? 


6. 最 后 ,创建 surf () 函数 来 完成 着 色 器 ， 然 后 对 物体 表面 的 最 终 颜 色 进行 处 理 。 


void surf (Input IN, inout SurfaceOutput o) 

{ 
fixed4 diffuseTex = tex2D ( Diffuse, IN.uv Diffuse); 
oO.Albedo = diffuseTex.rgb; 


0O.Gloss = diffuseTex.a; 
o.Alpha = 0.0; 

0O.Specular = SpecIntensity; 
O 


.Normal = UnpackNormal (tex2D( NormalMap, IN.uv Difftuse) ) ; 


完成 这 些 部 分 代码 之 后 ， 保 存 着 色 器 并 返回 Unity 编 辑 器 进行 编译 。 如 果 一 切 正常 的 话 ， 你 应 该 看 到 类 似 下 图 这 样 的 结果 : 





我 们 来 解释 一 下 这 个 着 色 器 做 了 什么 和 没 做 什么 。 首 先 它 排除 了 延迟 的 光照 pass (通行 ) 。 这 意味 着 如 果 你 创建 了 一 个 使 
用 延迟 泻 染 的 prepass 的 光照 浮 数 ， 那 么 着 色 器 不 会 使 用 这 个 特定 光照 浮 数 ， 而 是 寻找 上 默认 的 光照 浮 数 ， 比 如 本 书 之 前 创建 的 一 
些 光 照 遂 数 。 


这 个 特殊 的 着 色 器 并 不 支持 Unity 目 市 的 贴图 系统 提供 的 光照 贴图 。 这 样 束 防 止 了 着 色 器 去 寻找 附着 物体 的 光线 贴图 的 过 
程 。 通 过 这 种 万 式 也 可 以 提升 着 色 器 的 性 能 ， 让 其 表现 得 更 加 友好 ， 因 为 省 去 了 检查 光照 贴图 的 步 又 。 


我 们 将 noforwardadd 声 明 包 含 了 进来 ， 这 样 只 需要 对 一 个 平行 光 进 行 逐 个 像素 的 纹理 运算 。 其 他 所 有 光线 都 被 强制 转换 成 
了 逐个 顶 后 的 光线 ， 并 且 不 会 在 surf () 函数 中 进行 任何 逐个 像素 的 操作 。 


最 后 ， 使 用 halfasview 声 明 来 告诉 Unity 我 们 不 会 用 一 个 普通 光照 浮 数 的 viewDir 主 参数 ， 而 是 直接 使 用 半角 向 量 作 为 视线 方 
同 并 用 于 高 光 计算 。 这 样 束 让 着 色 器 运行 得 更 快 了 ， 因 为 半角 向量 是 基于 逐 顶 点 的 计算 。 当 我 们 需要 完美 模拟 真实 世界 的 高 光 效 
果 时 ， 这 人 么 做 显然 是 不 准确 的 ， 但 是 在 移动 设备 上 刚刚 好 ， 而 且 可 以 使 着 色 器 进一步 得 到 优化 。 


类 似 这 种 技术 会 让 着 色 器 更 高 效 并 且 代 码 更 加 精简 。 请 务必 做 到 只 是 用 根据 目标 硬件 和 视 帝 质量 权衡 之 后 的 必要 数据 。 最 
后 ， 这 些 类 似 于 鸡尾酒 的 混合 技术 最 终 会 成 为 你 的 游戏 中 不 可 或 屿 的 重要 组 成 部 分 。 


在 这 一 章 中 ， 你 会 学 到 如 下 内 容 : 


创建 屏幕 特效 的 脚本 系统 


` 使 用 屏幕 特效 实现 亮度 、 饱 和 度 以 及 对 比 度 


` 使 用 屏幕 特效 实现 类 似 Photoshop 的 基本 混合 模式 


“ 使 用 屏幕 特效 实现 全 加 混合 模式 


和 bb 用 
BbXE 


引言 
创建 自己 的 屏 副 特效， 也 被 称 为 后 期 特效 。 使 用 屏 天 特效， 我 们 可 以 创建 一 些 
美 轮 美 锡 的 实时 画面 ， 如 光 尝 效果 、 运 动 模 糊 效 果 、HDR 效 果 等 。 目 前 市 场 上 的 大 多 数 现代 游戏 都 大 量 使 用 了 这 些 屏 幕 特效 ， 


着 色 器 编程 的 过 程 中 最 令 人 惊叹 的 一 个 功 


比如 景深 (DOF) 效果 、 光 时 效果 或 者 颜色 策 正 效果 等 。 
在 本 章 中 ， 我 们 将 学 习 如 何 搭建 一 个 脚本 系统 来 控制 这 些 屏 幕 特效 的 创建 。 我 们 将 要 学 习 的 内 容 包括 泻 染 纹理 (render 
texture) 、 深 度 缓 冲 的 含义 ， 以 及 如 何 创建 一 种 类 似 于 Photoshop 对 游戏 演 染 画面 进行 最 终 控制 的 效果 。 将 屏幕 特效 运用 在 你 

的 游戏 中 ， 不 仅 能 让 你 的 看 色 器 学 习 更 加 圆满 ， 更 能 使 你 掌握 运用 Unity 实 现 令 你 腹 目 结 舌 的 实时 泻 染 的 技能 。 


8.3 ”使 用 屏 带 特效 实现 忱 度 、 饱 和 度 以 及 对 比 度 


现在 ,我 们 已 经 知道 了 如 何 搭 建 屏幕 特效 并 运行 叱 ， 接 下 来 将 学 习 如 何 创建 更 复杂 的 像素 操作 来 展现 现代 游戏 中 更 剃 见 的 一 


最 终 泻 染 


了 芭 2 生 人 / 


些 屏幕 特效 。 

使 用 屏幕 特效 来 调整 游戏 的 最 终 颜 色 是 美工 对 游戏 的 最 终 显示 效果 进行 整体 控制 的 重要 手段 。 诸 如 使 用 滑 块 来 调节 
的 红 绿 监 三 色 的 颜色 强度 或 者 在 游戏 的 整个 画面 晋 加 某 种 特殊 色调 等 都 是 一 些 惯用 手法 ， 可 以 制作 出 一 种 旧 照 卢 电影 风格 的 即 视 
纳 


本 节 我 们 将 会 学 习 图 像 上 的 一 些 更 加 核心 的 颜色 调 忆 操作， 即 调 世 亮度、 饱和 度 和 和 对比度， 会 学 习 如 何 编写 这 些 颜色 代码 为 


我 们 掌握 屏幕 特效 打下 民 好 基础 。 
8.3.1 ”准备 工作 
首先 需要 创建 一 些 新 的 资源 。 我 们 可 以 沿用 上 面 的 场景 作为 测试 场景 ， 但 是 还 需要 一 个 新 的 脚本 和 着 色 器 。 
1. 新 建 一 个 脚本 ， 命 名 为 BSC ImageEffect。 


2. 新 建 一 个 着 色 器 ， 命 名 为 BSC_Effect。 
3. 现 在 ,我 们 将 上 一 节 的 C# 代 码 简单 地 复制 到 新 的 脚本 中 ， 这 样 我 们 就 只 关注 亮度 、 饱 和 度 、 对 比 度 三 种 效果 的 算法 实现 


4. 将 上 一 节 的 着 色 器 代码 复制 值 到 新 的 着 色 器 中 。 


5. 任 场景 中 添加 几 个 新 的 对 象 ， 并 且 设 置 一 些 不 同 赢 色 的 漫 反 射 材质 ， 然 后 将 它们 随机 地 指定 给 场景 中 的 对 儿 。 这 样 融 为 我 
们 提供 了 一 个 很 好 的 颜色 范围 来 测试 新 的 屏幕 特效 。 


完成 以 后 ， 场 景 效 果 看 起 来 应 该 差不多 是 这 样 的 : 
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现在 ,我 们 已 经 完成 了 场景 的 设 定 ,创建 了 新 的 脚本 和 着 色 器 ， 可 以 开始 加 入 相应 的 代码 来 实现 亮度 、 饱 和 度 以 及 对 比 度 特 
效 了 。 我 们 只 天 注脚 本 和 看 色 器 中 的 像素 操作 和 变量 设置 ， 屏 幕 特效 系统 的 建立 和 运行 在 前 面 章 节 已 经 质 述 了 。 


1. 在 MonoDevelop 编 辑 器 中 打开 新 的 脚本 和 着 色 器 。 只 需要 在 项 目 视 图 中 双击 脚本 和 着 色 器 文件 束 可 以 打开 它们 。 


2. 首 先 编辑 着 色 器 会 更 有 意义 ， 因 为 这 样 我 们 区 清楚 C# 肢 本 需要 设置 哪些 变量 。 为 了 实现 亮度 、 饱 和 度 和 对 比 度 效果 ,我 
们 在 Properties 代 码 块 中 添加 合适 的 属性 变量 。 记 住 一 点 ， 需 要 在 着 色 器 中 包含 _MainTex 属 性 ， 因 为 在 创建 屏幕 特效 时 它 会 作 
为 泻 染 纹理 的 目标 属性 。 


Properties 

{ 
MainTex ("Base {RGB)", 2D) = "white™ {} 
_BrightnessAmount ("Brightness Amount", Range(0.0, 1 
satAmount ("Saturation Amount", Range(0.0, 1)) = 1. 
ConAmount ("Contrast Amount", Range(0.0, 1)) = 1.0 


jy ne ,0 
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3. 按 照 惯 例 ， 为 了 能 够 在 CGPROGRAM 模 块 中 访问 Properties 代 码 块 中 的 数据 ， 需 要 在 CGPROGRAM 模 块 中 添加 对 应 的 变 
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ms PT 
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CGPROGRAM 

#pragma vertex Vert_ img 

#pragma fragment frag 

#pragma fragmentoption ARB precision hint fastest 
#ijnclude "UnityCG.cginc" 

uniform sampler2D MainTex; 

fixed BrightnessAmount; 


fixed satAmount; 
fixed conAmount; 


4. 现 在 ,我 们 需要 建立 相应 的 操作 来 表现 亮度 、 饱 和 度 和 对 比 度 效果 。 在 frag () 消 数 上 面 添加 一 
日 阔 数 的 意义 ， 我 们 会 在 后 面 对 代码 进行 解释 。 


5. 最 后 ， 使 用 上 面 的 ContrastSaturationBrightness () 贸 数 更 新 frag () 


果 传 给 脚本 。 


float3 ContrastSaturationBrightness (float3 color, float brt, float 


{ 


天 天 Increase or decrease theese valilues to 


//adijust r, 9 ana b color channels seperately 
float AvgLumR Gas 

float AvgLumG U.D7; 
float AvgLumB = 0.5); 


//Luminance coeffici 


ents for ge 
float3 LuminanceCoeff = 


et 
fioatsl0: 


//Operation for brightnes 

float3 AvgLumin = pe AvgLumG, AvgLumB); 

float3 brtColor SOLDE * rE 

float intensityf = dot(brtColor, LuminanceCoeff),; 

float3 intensity = float3(intensityf, intensityf, intensityf); 


Uration 


//Operation for Sat 
= lerp(intensity, brtColor, sat); 


float3 satColor 


d 


//Operation for 
FlGAE3 ConColor 
return conColor; 


rast 


ee satColor, con); 


EE ， 


消 数 。 它 实现 了 泻 染 


\ 


fixed4 fragl(v2f img i) : COLOR 


{ 


着 色 器 的 代码 完成 之 后 ， 回 到 Unity 编 辑 器 并 对 着 色 器 进行 编译 。 如 果 一 切 正常 的 话 ， 我 们 丈 可 以 返回 


//Get the colors from the 
//from the v2f img struct 
fixed4 renderTex = tex2D( 


RenderTexture and the uv's 


MainTex, i.uv); 


//Apply the Brughtness, saturation, contrast operations 

renderTex.rgb = ContrastSaturationBrightness (renderTex.rgb, 
_BrightnessAmount, 
_ SatAmount, 


_ConRmount ) ; 


return renderTex; 


对 脚本 进行 编译 了 。 首 先 通 过 创建 几 行 新 的 代码 将 正确 的 数据 传 给 着 色 器 。 


一 个 新 销 数 。 先 不 用 急 着 明 


sat, float con) 


纹理 的 像素 操作 ， 并 将 结 


到 MonoDevelop 中 


1. 首 先 修改 脚本 的 代码 ， 为 了 能 够 控制 影响 屏幕 特效 的 一 些 因 素 ， 我 们 添加 相应 的 变量 。 在 本 例 中 ,我们 需要 三 个 用 于 调节 
亮度 、 饱 和 度 和 对 比 度 的 滑 块 。 


#reoqion Variables 
public Shader curShader; 

public float brightnessAmount = 1.C 
public float saturationAmount = 1.0 
public float contrastAmount = 0f; 
private Material curMaterial; 
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变量 添加 完成 之 后 ， 我 们 还 要 告诉 脚本 将 这 些 变量 值 传 递 给 着 色 器 ， 在 OnRenderlmage () 函数 中 实现 这 个 功能 。 


Vold OnRenderImage (RenderTexture sourceTexture, RenderTexture destTexture) 
{ 
if(curShader != null) 


{ 
material.SetFloat(”" BrightnessAmount", brightnessAmount); 


material.SetFloat(” satAmount", saturationAmount); 
material.SetFloat(" conAmount", contrastAmount); 


Graphics.Blit (sourceTexture, destTexture, material); 


} 


else 


{ 


Graphics.Blit(sourceTexture, destTexture); 


} 


3. 最 后 ， 我 们 需要 做 的 是 将 变量 值 限 定 在 一 个 合理 的 学 围 内 。 这 个 限定 值 是 完全 上 自由 的 ， 所 以 可 以 使 用 任何 你 认为 合适 的 
值 。 


Vold Update () 


brightnessAmount Mathf.Clamp (brightnessAmount, 0.0f, 2.0f); 


2 
saturationAmount = Mathf.Clamp (saturationAmount, 0.0f, 2.0f); 
contrastAmount = Mathf.Clamp (contrastAmount, 0.0f, 3.0f); 


脚本 和 者 色 器 编写 完成 以 后 ， 我 们 简单 地 将 脚本 附加 在 主 镜头 上 ， 并 将 着 色 器 指定 给 该 脚本 。 这 样 ， 当 你 操作 滑 块 时 ， 应 该 
就 能 看 到 亮度 、 饱 和 度 和 对 比 度 的 不 同 效果 了 。 如 下 图 所 示 : 


葛 度 =0.5 人 已 和 度 =2.0 对 比 度 =1.75 


另外 一 个 对 泻 染 图 进行 颜色 调节 之 后 的 效果 图 : 


车 度 =1.64 人 饱和 度 =0.0 对 比 度 =0.57 


8.3.3 ”工作 原理 


因为 我 们 已 经 知道 基本 的 屏幕 特效 系统 是 如 何 工作 的 了 ， 所 以 直接 来 看 一 下 着 色 器 中 的 ContrastSaturationBrightness () 





消 数 是 如 何 进 行 像素 操作 的 。 


该 冰 数 有 几 个 参数 ， 第 一 个 参数 是 最 重要 的 ， 它 表示 的 是 当前 的 泻 染 纹理 ， 其 他 的 都 是 调节 屏幕 特效 的 参数 ， 它 们 的 值 由 
Inspector 标 尝 页 上 的 调节 滑 块 传递 过 来 。 一 旦 函数 接收 到 泻 染 纹理 和 调节 倡 两 个 参数 ， 它 会 声明 一 个 单 量 ， 使 用 这 个 单 量 和 原 
始 的 泻 染 纹理 进行 比较 或 者 修改 。 


使 用 luminanceCoeff 变 量 来 存储 当前 图 像 的 全 局 亮度 值 。 这 个 系统 是 由 CIE 颜 色 匹 配 函 数 得 到 的 ， 并 且 成 为 行业 标准 。 我 
们 把 当前 颜色 值 和 这 些 亮度 系数 进行 点 积 运 算得 到 图 像 的 全 局 亮度 。 得 到 亮度 值 之 后 ， 我 们 再 用 两 个 lerp 背 数 从 亮度 值 的 操作 开 
台 混 合 运算 ， 然 后 用 原始 图 像 乘 上 六 数 传递 过 来 的 亮度 值 。 


类 似 于 本 例 的 游戏 特效 是 实现 游戏 高 品质 图 像 的 关键 因素 ， 因 为 你 无 须 编辑 六 戏 中 的 每 个 材质 束 可 以 整体 调整 最 后 的 画面 效 
宋 。 


8.4 ”使 用 屏幕 特效 实现 类 似 Photoshop 的 基本 混合 模式 


屏幕 特效 不 仪 仪 限 于 调整 游戏 中 泻 染 画面 的 颜色 ， 我 们 也 可 以 用 它 来 实现 其 他 图 像 与 演 染 纹理 之 间 的 混合 效果 。 这 个 技术 有 
点 类 似 Photoshop 中 新 建 一 个 图 层 ， 然 后 选择 一 个 混合 方式 将 它们 混合 起 来 。 在 本 例 中 ， 其 中 一 个 层 就 是 演 染 纹理 。 这 是 一 种 
很 强大 的 技术 ， 因 为 它 为 美工 提供 了 一 种 工作 环境 ， 一 种 模拟 游戏 中 混合 模式 的 方式 ， 这 种 方式 不 eo 


本 证 我 们 将 研究 一 下 最 剃 见 的 混合 模式 ， 包 括 乘 法 (Multiply) 、 寺 加 (Add) 以 及 获 (Overlay) 。 你 会 看 到 在 你 的 游 
es 合 模式 是 多 人 么 方便 。 


8.4.1 准备 工作 

在 开始 之 前 ， 首 先 还 是 需要 准备 一 些 资 源 。 所 以 ， 我 们 按照 下 面 的 步骤 来 为 屏幕 特效 系统 做 准备 ， 然 后 运行 新 的 混合 模式 屏 
幕 特效 。 

1. 新 建 一 个 脚本 ， 命 名 为 BlendMode ImageEffect。 

2. 新 建 一 个 着 色 器 ， 命 名 为 BlendMode Effect。 

3. 现 在 我 们 只 需要 将 之 前 的 C# 代 码 复制 到 新 建 的 脚本 中 ， 这 样 ， 就 可 以 只 关心 亮度 、 饱 和 度 和 对 比 度 了 。 

4. 同 样 ， 将 着 色 器 的 代码 也 复制 过 来 。 

5. 最 后 ， 还 需要 另外 一 个 纹理 用 于 混合 模式 的 效果 。 在 本 节 中 ， 我 们 将 会 使 用 一 张 失真 型 贴图 ， 这 种 效果 下 可 以 直观 地 进行 
测试 。 

下 图 是 我 们 用 于 制作 这 种 效果 的 失真 型 贴图 。 我 们 需要 找到 一 张 拥有 足够 细节 以 及 足够 好 的 灰 度 值 范围 的 贴图 来 测试 我 们 的 
效果 。 





8.4.2 ”操作 步 又 


第 一 个 混合 模式 是 单 见于 Photoshop 中 的 乘法 混合 模式 。 我 们 移 来 修改 着 色 器 中 的 代码 。 
1. 在 Unity 项 目 视图 上 双击 着 色 器 文件 ， 在 MonoDevelop 中 打开 着 色 器 。 
2. 首 移 需 要 添加 一 些 新 属性 。 我 们 需要 添加 用 于 混合 的 纹理 以 及 调节 透明 值 的 滑 块 ， 如 下 代码 所 示 : 


Properties 


{ 
MainTex ("Base (RGB)", 2D) = "white” {} 
BlendTex ("Blend Texture", 2D) = "white"{} 
Opacity ("Blend Opacity", Range(0,1)) = 1 


3. 在 CGPROGRAM 语 句 中 添加 对 应 的 变量 ， 这 样 我 们 才能 访问 Properties 代 码 块 中 的 数据 。 


Pass 


{ 
CGPROGRAM 


#pragma vertex vert_ img 

#pragma fragment frag 

#pragma fragmentoption ARB precision hint fastest 
#ijnclude "UnityCG.cginc" 


uniform sampler2D MainTex; 
uniform sampler2D BlendTex; 
fixed Opacity; 


4. 最 后 ， 修 改 frag () 国 数 ， 对 两 张贴 图 进行 乘法 运算 。 


fixed4 ftrag(v2t img i) : COLOR 
{ 
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/trom the viet img struct 
fixed4 renderTex = tex2D( MainTex, i.uv); 
fixed4 blendTex = tex2D( BlendTex, i.uv); 
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renderTex = lerp(renderTex, blendedMultiply, Opacity); 


二 上 上 


return renderTex; 


5. 保 存 着 色 器 ， 返 回 Unity 编 辑 器 中 对 新 的 着 色 器 代码 进行 编译 并 检查 错误 。 如 果 编 译 没 有 错误 的 话 ， 双 击 C# 脚 本 文件 打开 
MonoDevelop 编 辑 器 。 


6. 在 我 们 的 脚本 文件 中 ， 也 需要 创建 相应 的 变量 。 现 在 我 们 需要 一 个 指定 给 着 色 器 的 纹理 贴图 ， 以 及 一 个 滑 块 用 来 控制 我 们 
希 望 使 用 混合 口 模式 的 总 数量 


public Shader curShader; 

public Texture2D blendTexture; 
public float blendOpacity = 1.0f; 
private Material curMaterial; 


7. 然 后 通过 OnRenderlImage () 遂 数 将 变量 值 传 入 着 色 器 。 


Vold OnRenderImage (RenderTexture sourceTexture, RenderTexture destTexture) 


{ 
if (curShader != null) 


{ 
material.SetTexture(" BlendTex", blendTexture); 
material.SetFloat(" Opacity", blendOpacity); 


Graphics.Blit(sourceTexture, destTexture, material); 


Graphics.Blit (sourceTexture, destTexture); 


8. 为 完成 着 色 器 的 最 后 一 步 ， 还 需要 填充 Update () 函数 ,将 blendOpacity 变 量 值 限定 在 0.0 到 1.0 之 间 。 


Vold Update () 


{ 
blendOopacity = Mathf.Clamp (blendOpacity, 0.0f, 1.0f); 


} 


着 色 器 和 脚本 完成 以 后 ， 需 要 将 屏幕 特效 的 脚本 拖 岛 到 主 镜头 上 ， 并 将 着 色 器 指定 给 脚本 ， 这 样 脚 本 才能 使 用 着 色 器 进行 像 
素 级 的 操作 。 最 后 ， 为 了 实现 完整 的 功能 ， 脚 本 和 着 色 器 会 开始 查找 相应 的 贴图 文件 。 你 可 以 为 屏幕 特效 脚本 在 Inspector 标 答 
页 指定 任意 的 纹理 贴图 。 一 旦 指定 了 纹理 ， 你 会 看 到 这 个 纹理 与 游戏 浑 染 图 像 相 乘 之 后 的 结果 。 如 下 图 所 示 : 


湿 人 杯 式 > 乘 法 不 殉 明 度 


下 图 展示 了 一 个 更 高 透明 度 的 混合 强度 效果 ， 这 时 贴图 可 以 更 加 明显 地 窗 盖 在 泻 染 图 像 上 。 


混合 模式 = 乘法 不 透明 度 = 


第 一 个 混合 模式 已 经 创建 好 了 ， 我 们 可 以 再 看 一 组 更 简单 的 混合 模式 ， 以 便 更 好 地 理解 在 游戏 中 添加 更 多 特效 以 及 最 终 效 果 
微调 的 简便 之 处 。 首 先 我 们 将 代码 分 成 几 个 部 分 来 分 析 一 下 具体 的 功能 实现 。 


8.4.3 ”工作 原理 





清楚 在 Unity 中 通过 这 个 简 


串 
潭 
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更 加 强大 和 和 灵活。 相信 你 应 该 


口才 人 日 
早 变 得 


得 到 原始 泻 染 


运 今 为 止 我 们 都 在 使 用 屏幕 特效 编程 ， 它 让 我 们 的 实现 过 下 
单 的 系统 我 们 可 以 实现 多 少 东西 。 我 们 完全 可 以 复制 Photoshop 中 图 层 的 混合 模式 ， 使 美工 能 够 在 短 时 间 内 灵活 地 实现 
甚至 实现 一 种 


少量 数学 公式 实现 两 个 图 像 的 乘法 运算 、 两 个 图 像 的 加 法 运算 
合 模式 时 ， 郑 不 多 需要 


的 图 形 效果 。 


阅读 完 这 一 书 之 后 ， 我 们 束 可 以 考虑 如 何 使 用 
屏幕 的 混合 模式 。 使 用 混合 模式 时 ， 必 须 从 像素 级 进行 考虑 。 例 如 : 当 我 们 使 用 一 个 乘法 混 
纹理 的 每 个 像素 ， 然 后 再 乘 上 混合 纹理 的 每 个 像素 。 堵 加 混合 模式 也 是 一 样 的 道理 。 它 只 是 利用 一 个 简单 的 数学 运算 ， 用 原始 纹 
j 进 和 


理 或 者 泻 染 纹理 的 每 个 像素 与 混合 纹理 的 每 个 像素 相 加 。 
屏幕 的 混合 模式 肯定 比 我 们 这 里 讲 的 要 复杂 ， 但 它 的 基本 原理 却 是 相似 的 。 它 会 将 每 个 图 像 ( 演 染 纹理 和 混合 纹理 ) 进行 反 
转 ， 然 后 将 它们 相 乘 ， 最 后 再 执行 一 次 反 转 得 到 最 终 的 效果 。 融 像 Photoshop 中 的 图 片 混合 一 样 ， 使 用 混合 模式 我 们 惑 可 以 实 


现 类 似 的 屏 夫 效 果 。 


模式 来 学 习 屏 幕 特效 。 





下 面 通 过 添加 两 个 混合 

在 屏幕 特效 着 色 器 中 ， 在 frag () 函数 中 添加 如 下 代码 ， 并 修改 返回 值 ， 此 外 ， 还 需要 将 乘法 混合 注释 掉 。 
fixed4 frag(v2f img i) : COLOR 
{ 

gp x2I BR 
1 a 


fixed4 renderTex = tex2D( MainTex, 
fixed4 blendTex = tex2D( BlendTex, 





fixed4 blendedMultiply = renderTex + blendTex:; 


bh 


renderTex = lerp(renderTex, blendedMultiply, Opacity); 


return renderTex; 


1. 保 仔 MonoDevelop 中 的 着色 器 代码 ， 返 回 Unity 编 辑 着 色 器 。 如 果 编 译 没 什么 问题 的 话 ， 你 将 看 到 如 下 图 所 示 的 简单 的 


去 加 混合 模式 : 





如 你 所 见 ， 堵 加 模式 与 乘法 混合 模式 的 效果 大 有 不 同 。 这 融 是 两 个 图 像 吐 加 的 效果 。 


2. 最 后 ， 再 增加 一 个 混合 模式 ， 叫 作 屏 幕 混合 。 它 涉及 一 些 数学 吉 识 ， 但 是 实现 起 来 却 是 很 简单 的 。 在 frag () 消 数 中 输入 


如 下 代码 : 


fixed4 frag(v2t img 1) : COLOR 
『 


\ 








Er 二 二 Po > 


fixed4 renderTex = tex2D( MainTex, i.uv); 
fixed4 blendTex = tex2D( BlendTex, Th 





- renderTex) * (1.0 - blendTex))); 





忆捷 站 
一 人 2 he oe A > 


fixed4 blendedscreen = (1.0 - ((1. 


se 六 
gy 二 py 9 ~ I ~ ee mm mm 


blendedScreen， Opacity); 


renderTex = erp (enaeTrTexX， 


return renderTex; 


下 图 展示 的 是 使 用 屏幕 混合 模式 对 两 个 图 像 进行 混合 之 后 的 效果 : 


-上 -= 


FI 


二 a -> 
上 -二 1 比 人 出 I 





8.5 ”使 用 屏 罩 特效 实现 覆 瑟 混合 模式 


在 这 最 后 一 节 中 ， 我 们 学 习 另 外 一 种 类 型 的 混合 模式 一 覆 苹 混合 模式 。 这 种 混合 模式 实际 上 使 用 了 一 些 条 件 语 句 来 判断 每 
个 像素 中 各 个 通道 的 最 终 颜 色 。 所 以 ， 使 用 这 种 类 型 的 混合 模式 需要 一 些 额 外 的 代码 ， 接 下 来 看 看 是 如 何 实现 的 。 


8.5.1 准备 工作 

为 了 实现 这 个 屏幕 特效 ,需要 像 上 一 节 一 样 创 建 两 个 脚本 。 这 一 证 我 们 会 继续 使 用 与 之 前 相同 的 场景 ， 因 此 不 需要 创建 新 的 
场景 了 。 

1. 创 建 一 个 脚本 ， 命 名 为 Overlay ImageEffect。 新 建 一 个 着 色 器 ， 命 名 为 Overlay Effect。 

2. 将 上 一 节 C# 脚 本 中 的 代码 拷贝 到 新 的 脚本 文件 中 。 

3. 将 上 一 古 的 着 色 器 代码 拷贝 到 着 色 器 文件 中 。 

4. 将 Overlay_lImageEffect 脚 本 添加 到 主 镜 头 上 ， 再 在 Insepector 标 签 页 中 将 Overlay_Effect 着 色 器 指定 给 脚本 组 件 。 


5. 最 后 ， 双 击 脚 本 和 着 色 器 文件 ， 在 MonoDevelop 编 辑 器 中 打开 。 


8.5.2 操作 步骤 


在 开始 实现 覆盖 混合 模式 之 前 ， 需 要 准备 好 着 色 器 代码 并 且 保 证 能 正常 运行 起 来 。 然 后 就 可 以 开始 修改 脚本 ， 以 确保 着 色 器 


接收 到 正确 的 数据 了 。 


1. 首 先 在 Properties 代 码 块 中 添加 需要 的 属性 。 使 用 与 上 一 证 相同 的 属性 变量 : 


Properties 
{ 
MainTex ("Base (RGB)", 2D) = "white" {} 
BlendTex ("Blend Texture", 2D) = "white"t{)} 


Opacity ("Blend Opacity", Range(0,1)) = 1 


2. 然 后 ， 在 CGPROGRAM 部 分 创建 相应 的 属性 变量 ，。 


Pass 
“GPROGRAM 
#pragma verte srt me 
#PIragmse racoment tra 
#0rac RE + A c+ect 





uniform sampler2D MainTex; 
uniform sampler2D BlendTex; 
fixed Opacity; 


3. 为 了 达到 履 兰 混合 效果 ， 我 们 必须 对 各 个 通 趾 的 每 个 像素 单独 进行 处 理 。 要 实现 这 一 点 ， 需 要 在 着 色 器 中 编写 一 个 目 定 义 
肖 数 来 对 某 个 单 通道 (比如 红色 通道 ) 进行 履 兰 操作 。 人 在 着 色 器 变量 声明 下 方 添加 如 下 代码 : 


fixed OverlayBlendMode (fixed basePixel, fixed blenadP1IXel) 


{ 
if (basePixel < 0.5) 
{ 
return (2.0 * basePixel * blendpixel); 
} 
ESE 


{ 
return (1.0 - 2.0 * (1.0 - basePixel) * (1.0 - blendPixel)); 


} 


VC 
> 个 


4. 最 后 ， 还 需要 更 新 frag () 函数 ， 对 每 个 通道 进行 处 理 ， 以 实现 最 终 的 混合 效果 。 


fixed4 frag(v2f img 1I) : COLOR 
{ 


//Get the colors from the RenderTexture and the uv's 
//from the v2f img struct 

fixed4 renderTex = tex2D( MainTex, i.uv); 

fixed4 blendTex = tex2D( BlendTex, i.uv); 


fixed4 blendedImage = renderTex; 

blendedImage.r = OverlayBlendMode (renderTex.r, blendTex.r); 
blendedImage .9g = OverlayBlendMode (renderTex.g, blendTex.g); 
blendedImage.b = OverlayBlendMode (renderTex.b, blendTex.b); 


//Adjust amount of Blend Mode with a lerp 
renderTex = lerpl(renderTex, blendedImage, Opacity); 


return renderTex; 


5. 着 色 器 代码 完成 之 后 ， 特 效 系统 就 可 以 运行 了 。 保 存 着 色 器 并 返回 Unity 中 进行 编译 。 脚 本 已 经 创建 好 了 ， 所 以 不 需要 做 
任何 修改 。 着 色 器 完成 编译 以 后 ， 你 应 该 会 看 到 如 下 所 示 的 效果 : 


覆 兰 混合 模式 





8.5.3 ”工作 原理 


覆盖 混合 模式 涉及 了 更 多 的 知识 后 ， 但 是 如 果 你 将 函数 进行 分 解 ， 整 会 友 现 它 其 实 束 是 由 一 个 乘法 竟 合 模式 和 一 个 屏幕 混合 
模式 组 成 的 。 除 此 之 外 我 们 还 在 本 例 中 做 了 一 个 条 件 判断 ， 以 决定 使 用 哪 种 混合 模式 。 


这 种 特殊 的 屏幕 特效 会 在 覆盖 销 数 接收 到 某 个 像素 值 时 进行 检查 ， 查 看 它 是 否 小 于 0.5。 如 果 值 小 于 0.5 的 话 丈 会 使 用 修改 之 
的 乘法 混合 模式 ， 反 之 则 会 使 用 修改 之 后 的 屏幕 混合 模式 。 我 们 对 各 个 像素 的 每 一 个 通道 都 按照 这 种 钦 辑 进行 处 理 ， 这 样 束 使 
屏幕 特效 得 到 了 最 终 的 RGB 像素 值 。 


后 
4 量 
本 


帅 也 


如 你 所 网 ， 使 用 屏幕 特效 可 以 制作 很 多 酷 烃 的 效果 。 这 完全 取决 于 你 的 平台 ， 以 及 你 分 配给 屏幕 特效 的 内 存 大 小 。 这 通 
是 由 你 的 项 目 需求 决定 的 ， 所 以 ， 享 受 屏幕 特效 市 来 的 乐趣 ， 并 开始 洗手 创建 属于 你 的 屏幕 特效 吧 。 


第 9 章 ”游戏 可 玩 性 和 屏幕 特效 


在 游戏 开 及 的 时 候 ， 材 质 的 设计 只 是 整个 开 友 过 程 中 的 一 个 小 的 方面 。 游 戏 的 整体 风格 体验 可 以 通过 屏 异 特效 加 以 后 期 制 
作 。 在 电影 行业 中 这 种 方式 也 非常 普遍 ， 比 如 色彩 的 校正 通 弟 是 在 制 片 后 期 进行 的 。 在 游戏 开 友 中 ， 同 样 可 以 使 用 这 些 手段 和 技 
术 ， 比 如 使 用 第 8 章 中 提 到 的 一 些 屏幕 特效 相关 的 技术 。 在 这 一 章 中 ， 我 们 主要 介绍 两 个 方面 的 内 容 ， 你 可 以 调整 这 些 内 容 来 满 
足 目 己 的 开 友 需求 ， 也 可 以 在 理解 透彻 的 基础 上 创建 目 己 想 要 的 屏 老 特效 。 


在 这 一 章 中 ， 你 会 学 到 如 下 内 容 : 
` 创建 老 电影 风格 的 屏幕 特效 


创建 夜 视 风 格 的 屏幕 特效 


引言 
家 沉浸 在 游戏 世界 中 ， 感 觉 像 是 在 


| mm | 
如 果 你 在 阅读 这 本 书 ， 应 该 已 经 玩 过 一 两 款 游戏 了 。 即 时 游戏 的 一 个 重要 因素 束 是 要 让 玩家 沉浸 
真实 世界 中 进行 游戏 一 般 。 越 来 越 多 的 现代 游戏 使 用 屏幕 特效 来 创造 这 种 沉浸 的 感 完 。 


使 用 屏幕 特效 ， 可 以 把 一 个 平静 伴 和 的 环境 变 成 一 个 紧张 激烈 的 环境 ， 而 我 们 需要 做 的 仅仅 是 改变 一 下 屏幕 的 画 风 。 想 象 一 
卡 中 的 一 个 房间 时 ， 游 戏 进入 一 个 电影 画面 中 。 很 多 现代 游戏 都 会 开启 屏幕 特效 来 切换 不 同时 刻 的 心情 和 氛 


下 当 你 走 进 场景 
围 。 掌 握 如 何 创建 游戏 所 需 的 屏幕 特效 是 着 色 器 开 友 的 下 一 个 目标 。 
在 这 一 草 ， 我 们 将 看 到 常见 的 屏幕 特效 。 我 们 将 会 学 习 如 何在 第 一 人 称 射 击 游戏 中 实现 夜 视 镜 的 效果 。 在 每 一 书 中 ， 我 们 都 


会 告诉 你 如 何 把 屏幕 特效 和 游戏 事件 联系 起 来 ， 这 样 束 可 以 在 需要 的 时 候 打 开 或 者 关闭 对 应 的 屏幕 特效 。 


9.2 创建 老 电 影 风 格 的 屏 罩 特效 


不 相同 。 有 些 友 生 在 梦幻 世界 ， 有 些 友 生 在 未 来 世界 ， 有 些 甚至 友 生 在 古老 的 西方 世界 。 在 胺 卷 相 机 刚刚 


游戏 的 时 代 育 景 各 
发 明 的 时 候 都 是 黑 日 画面 或 者 泛 黄 的 画面 ， 这 就 是 所 谓 的 旧 照 片 特效 。 这 种 效果 看 起 来 是 很 明显 的 ， 我 们 将 会 使 用 Unity 的 屏幕 


特效 来 重 现 这 种 效果 。 
往 整 个 画面 变 成 黑 日 或 者 灰色 ， 需 要 把 这 种 效果 分 解 成 几 个 组 成 部 分 


实现 这 种 效果 需要 几 个 步骤 ， 比 如 
的 参考 镜头 。 我 们 参考 下面 的 截图 ， 然 后 将 它 的 组 成 元 素 分 解 出 来 。 


分 。 先 来 分 析 一 下 老 电 
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可 以 用 一 些 网 上 找到 的 图 片 来 拼凑 出 这 张 图 片 。 试 着 使 用 Photoshop 来 构建 效果 图 是 个 不 错 的 主意 ， 这 可 以 为 屏幕 特效 提 
供 一 个 思路 。 执 行 Photoshop 的 过 程 不 仅 可 以 告诉 我 们 代码 需要 分 成 哪些 元 素 ， 更 可 以 为 我 们 提供 一 种 快速 找到 合适 的 混合 模 
式 和 组 织 屏幕 特效 图 层 的 方法 。Photoshop 文 件 可 以 在 www.packtpub.com/support 中 找到 ， 文 件 名 为 
OldFilmEffect Research Layout.psd。 


9.2.1 ”准备 工作 


现在 我 们 已 经 知道 需要 做 成 什么 样子 了 ， 下 面 看 一 下 各 个 图 层 是 如 何 组 合 到 一 起 的 ， 然 后 再 为 着 色 器 找到 对 应 的 资源 。 


“ 旧 照 片 色调 : 这 个 相对 来 说 比较 容易 实现 ， 因 为 只 需要 把 原始 泻 娄 图像 的 像素 颜色 区 间 限 定 到 某 一 个 单 色 域内 就 可 以 了 。 
这 很 简单 ， 只 需要 利用 原始 图 像 的 亮度 值 并 增加 一 个 颜色 常数 即 可 。 第 一 个 图 层 看 起 来 是 这 样 的 : 





- 尝 影 效果 : 当 使 用 老 旧 的 电影 放映 机 时 ， 我 们 经 常 能 看 见 某 种 类 型 的 软 边框 围绕 在 老式 胶片 的 周围 。 这 是 因为 用 来 拍 影片 
的 灯泡 在 屏幕 中 间 的 亮度 比 在 四 周 的 亮度 更 高 。 这 种 效果 通常 叫 作 尝 影 效果 ， 它 是 屏幕 特效 的 第 二 个 图 层 。 可 以 使 用 一 张贴 图 履 
盖 在 整个 屏幕 上 来 做 出 这 种 效果 。 下 图 展示 的 是 这 一 层 的 样子 ， 它 看 起 来 就 好 像 是 从 图 片 中 分 离 出 来 的 一 样 。 





. 灰尘 和 划 痕 : 老 电影 屏幕 特效 的 第 三 个 图 层 也 是 最 后 一 个 图 层 。 这 一 层 将 会 使 用 两 张 平 铺 的 贴图 ， 一 张 用 作 灰 尘 ， 一 张 用 
作 划 痕 。 这 是 因为 我 们 希望 两 张贴 图 随时 间 的 推移 呈现 不 同 的 平 铺 率 ， 这 样 才能 使 我 们 在 电影 播放 的 过 程 中 营造 出 每 一 帧 图 像 都 
有 某 些微 小 的 灰尘 和 划 痕 的 效果 。 下 图 是 这 个 效果 的 示意 图 : 





下 面 使 用 前 面 的 贴图 为 屏幕 特效 做 些 ) 佳 备 。 具 体 步 又 如 下 : 


1. 准 备 一 张 早 影 效 果 的 贴图 ， 以 及 一 些 灰 侍 和 划 痕 的 贴图 ， 就 像 我 们 前 面 看 到 的 那样 。 
2. 新 建 一 个 脚本 ， 命 名 为 OldFilmEffect.cs， 再 新 建 一 个 着 色 器 ， 命 名 为 OldFilmEff-ect9hader.shader。 


3. 脚 本 和 着 色 器 文件 创建 完成 之 后 ， 需 要 添加 合适 的 代码 来 建立 屏幕 特效 系统 并 运行 起 来 。 代 码 的 编写 可 以 参考 第 8 草 的 内 
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最 后 ， 随 着 屏幕 特效 系统 的 建立 和 运行 ， 以 及 纹理 准备 就 绪 ， 我 们 就 可 以 开始 重 现 老 电影 特效 了 。 


9.2.2 “操作 步骤 


老 电 影 风格 的 屏幕 特效 的 每 个 图 层 都 是 非常 简单 的 ， 但 是 当 我 们 将 它们 组 合 到 一 起 的 时 候 会 做 出 一 些 尺 人 的 视 总 效果 。 我 们 
将 从 如 何 创建 脚本 和 着 色 器 代码 开始 ， 然 后 进一步 解释 每 一 行 代码 并 且 了 解 这 些 代码 是 如 何 工 作 的 。 现 在 屏幕 特效 系统 已 经 建立 
好 了 ， 因 此 这 一 节 我 们 不 会 涉及 基础 的 屏幕 特效 系统 的 准备 。 


1. 首 先 编辑 脚本 的 代码 。 为 了 让 用 户 能 够 自行 调整 参数 以 达到 想 要 的 效果 ， 我 们 会 在 第 一 个 代码 段 加 入 一 些 显示 在 
Inspector 标 签 页 中 的 变量 声明 。 在 决定 哪些 参数 需要 显示 在 lnspector 标 签 页 上 时 ， 可 以 使 用 Photoshop 中 的 效果 图 作为 参 
考 。 在 特效 系统 的 脚本 中 输入 如 下 代码 : 


#region Variables 
public Shader oldFilmShader.,; 


public 


public 
public 
mhlag 


public 
puBl1e 
public 


public 
public 
public 


float OldFilmEffectAmount = 1.0f., 


Color sepiaColor = Color.white; 
Texture2D vignetteTexture; 


float vignetteAmount = 1.0f; 


Texture2D scratchesTexture; 
float scratchesYSpeed = 10.0f; 
float scratchesXSpeed = 10.0f,; 


Texture2D dustTexture; 
float dustYSpeed LHe 
float dustXSpeed = 10.0f; 


private Material curMaterial,; 


private float randomValue,; 


#endregion 


2. 接 下 来 ， 需 要 填充 OnRenderlmage () 函数 的 内 容 。 在 这 里 ， 将 会 把 变量 值 传递 给 着 色 器 ， 这 样 着 色 器 在 处 理 


的 过 程 中 就 可 以 使 用 这 些 数 据 了 : 


void OnRenderImage (RenderTexture sourceTexture, RenderTexture 
destTexture) 


人 


if (oldFilmShader != null) 
material .SetColor(" SepiaColor", sepiaColor); 
material.SetFloat (" VignetteAmount", vignetteAmount).,; 


material.SetFloat(" EffectAmount", 
OldFilmEffectAmount).; 


if(vignetteTexture) 


人 


mateLr1Lal .SetTexture (" VignetteTex", 
VIgnetteTexture) ; 


} 


if(scratchesTexture) 


人 


material.SetTexture(" ScratchesTex", 
scratchesTexture).; 


material.SetFloat (" ScratchesYSpeed", 
scratchesYSpeed),， 


material.SetFloat(" ScratchesXSpeed", 
scratchesXSpeed),， 


} 


if (dustTexture) 


人 


\ 宇 2 


/ 旦 木 


纹理 


material .SetTlexturel(" DustTlTex”, dustTexture)s 
material.SetFloat(" dustYSpeed", dustYSpeed):; 
material.SetFloat(" dustXSpeed", dustXSpeed); 
material.SetFloat(" RandomValue", randomValue).,; 


Graphics.Blit (sourceTexture, destTexture, material).; 


} 


else 


{ 


Graphics .Blit (sourceTexture, destTexture):; 


3. 为 了 完成 屏幕 特效 的 脚本 部 分 ， 还 需要 将 变量 值 限 定 在 一 个 理想 的 区 间 内 ， 而 不 是 任意 范围 内 。 


void Update () 


{ 


vignetteAmount = Mathf.Clamp0l1 (vignetteAmount).,， 


OldFilmEffectAmount = Mathf.Clamp (OldFilmEffectAmount, 0f, 
下 :3 


randomValue = Random.Range(-1f,1f).， 


4. 脚 本 完成 以 后 ， 我 们 再 来 关注 着 色 器 文件 。 首 先 需 要 创建 脚本 中 存在 的 一 些 变量 ， 这 样 才能 在 脚本 和 着 色 器 之 间 建 立 对 应 
天 系 。 在 看 色 器 的 Properties 代 码 块 中 输入 下 面 代码 : 


Properties 
{ 

MainTex ("Base (RGB)", 2D) = "white" {} 
VignetteTex ("Vignette Texture", 2D) = "white"{)} 
ScratchesTex ("Scartches Texture", 2D) = "white"{} 
DustTex ("Dust Texture", 2D) = "white"{} 
_SepBzacCelor ("Sepia GOLGr”; COLl6r)}) = (51 1,1) 
EffectAmount ("Old Film Effect Amount"; Range(0;1)) = 1.0 
VignetteAmount: ("Vignette Qpacity", Range(0.1)})} = 1.0 
ScratchssYSpeed ("Scratches Y Speed", Float) = 10.0 
SecratchesXSpeed ("Scratches X Speed", Float) = 10.0 
dustXSpeeqd ("Duast XX Speeqd", Float}) = 10,0 
dustYSpsed ("Dust Y Speed”, Float) = 10.0 
RandomValue ("Random Value", Float) = 1.0 
Contrast ("Contrast™", Eloat) = 3.0 


5. 接 下 来 ， 像 前 面 一 样 ， 还 需要 在 CGPROGRAM 部 分 添加 一 些 名 字 相 同 的 变量 ， 使 CGPROGRAM 块 可 以 和 Properties 块 定 
义 的 属性 建立 联系 。 


CGPROGRAM 

#pragma vertex vert img 

#pragma fragment frag 

#pragma fragmentoption ARB precision hint fastest 
#1include "UnityCG.cginc" 


uniform sampler2D MainTex; 
uniform sampler2D VignetteTex,; 
uniform sampler2D ScratchesTex; 
uniform sampler2D DustTex; 
fixed4 SepiaColor; 

fixed VignetteAmount.; 

fixed ScratchesYSpeed; 

fixed ScratchesXSpeed:; 

fixed dustXSpeed; 

fixed dustYSpeed; 

fixed EffectAmount., 

fixed RandomValue,; 

fjxed Contrast.; 


6. 现 在 在 frag () 函数 中 简单 地 加 入 代码 ， 对 产生 屏幕 特效 的 像素 进行 处 理 。 首 先 ， 得 到 C# 了 脚本 传递 过 来 的 泻 染 纹理 以 及 


fixed4 frag(v2f img i) : COLOR 

{ 
//Get the colors from the RenderTexture and the uv's 
//from the v2f img struct 
half2 distortedUV = barrelDistortion(i.uv).; 


distortedUV = half2(13.UV.X; 1-UV.Y + ( RandomValue * 
SINDTiME.Z * 0.005)): 
fixed4 renderTex = tex2D( MainTex, .UV); 


//Get the pixels from the Vignette Texture 
fxed4 vidnietteTex = Eex2D( VighietteTexy 1l.UV); 


7. 然 后 ， 再 对 灰尘 和 划 汇 进行 处 理 ， 添 加 如 下 代码 : 


//Process the Scratches UV and pixels 


half2 scratchesUV = half2(i.uv.x + ( RandomValue * SIDIIme-Z * 
ScratchesXSpeed), i.uvVv.y + ( Time.x * ScratchesYSpeed)).; 
fixed4 scratchesTex = tex2D( ScratchesTex, scratchesUV).; 


//Process the Dust UV and pixels 

half2 dustUV = half2(i.uv.x + ( RandomValue * ( SinTinme.z 
* dustXSpeed)), i.uv.y + ( RandomValue * ( SIDTIIme-z * 
dustYSpeed))); 

fixed4 dustTex = tex2D( DustTex, dustUV).; 


8. 旧 照片 色调 的 处 理 也 需要 添加 进来 : 


// get the luminosity values from the render texture using the YIO 
values. 


fixed lum = dot (fixed3(0.299, 0.587,; 0.114), renderTex .rgb).; 


//AMAdd the constant color to the lum values 


fixed4 finalColor = lum + lerp( SepiaColor,; SepiaColor + 
fixed4(0.1f .0.1f .0.1f.1.0£f)}, RandomValue).; 
tinalColor = pow(ftinalCoplor, Contrast); 


9. 最 后 ， 把 所 有 的 图 层 和 颜色 结合 在 一 起 ， 返 回 最 终 的 屏幕 特效 纹理 。 


//Create a constant white color we can use to adijust opacity of 
effects 


fixed3 constantWhite = fixed3(1,1,1).， 


//Composite together the different layers to create finsl Screen 


Effect 
finalColor = lerp(finalColor, finalColor * vignetteTex, 
VIgnetteAmount ) ; 


finalColeor.rgb *s lerp(scratohesTex, constantWhite, (CC 
RandomValue) ) ; 


finalColor.rgb *= lerp{(dustTex.rgb, constantWhite, ( RandomValue * 
SinTime .2Z)); 


finalColor = lerp (renderTex, finalColor, EftfectAmount):; 


return finalColor.; 


0. 添 加 完 所 有 的 代码 并 且 确 定 无 误 之 后 ， 应 该 能 看 到 类 似 下 图 的 效果 。 在 Unity 中 日 击 play 按 钮 ， 可 以 看 到 灰尘 和 划 痕 的 动 
态 效 果 ， 图 像 也 会 友 生 轻微 的 位 移 。 
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9.2.3 ”工作 原理 


现在 ， 我 们 回 过 头 来 看 一 下 每 个 图 层 ， 然 后 对 它们 进行 一 些 分 解 ， 以 便 了 解 每 一 行 代码 的 工作 原理 。 这 样 我 们 才能 掌握 添 加 
屏幕 特效 的 更 多 方法 。 


老 电影 风格 的 屏幕 特效 已 经 完成 了 ， 现 在 逐 行 了 解 一 下 frag () 销 数 代码 的 仿 义 ， 因 为 其 他 代码 我 们 已 经 在 本 书 前 面 草 节 中 
过 论 过 了 。 


正如 Photoshop 中 图 层 的 概念 一 样 ， 着 色 器 会 对 每 个 图 层 进行 处 理 然后 再 将 它们 组 合 起 来 。 所 以 ， 处 理 每 个 图 层 时 ， 尝 斌 
理解 成 Photoshop 中 图 层 的 工作 方式 有 助 于 我 们 理解 ， 保 持 这 种 思维 模式 有 助 于 我 们 后 续 开发 更 多 特效 。 


现在 ， 看 一 下 frag () 消 数 中 第 一 部 分 的 代码 : 


fixed4 frag (v2f img 1) : COLOR 


{ 


//Get the colors from the RenderTexture and the uv's 
//from the v2f img struct 

half2 distortedUV = barrelDistortion(1.uv).; 

fixed4 renderTex = tex2D( MainTlex, 1T.uv); 

fixed4 vigiietteTex = tex2D( VignietteTex, LeUV)'; 


frag () 函数 中 的 第 一 部 分 代码 位 于 国 数 声明 的 下 方 ， 它 定义 了 主演 染 纹理 或 者 游戏 的 实际 泻 染 帧 是 如 何 使 用 UV 值 的 。 
为 我 们 要 实现 的 是 一 种 老 电 影 风 格 的 特效 ， 所 以 需要 在 每 一 由 上 对 主演 染 纹理 UV 值 进 行 调整 ， 这 样 才能 使 它们 闪烁 起 来 。 这 种 
闪烁 效果 模拟 了 投影 仪 轻微 晃动 的 效果 ， 所 以 使 用 UV 动画 来 实现 。 这 就 是 第 一 部 分 代码 实现 的 功能 。 

我 们 使 用 Unity 提 供 的 内 置 变量 SinTime 来 获得 一 个 -1 到 1 的 值 。 然 后 将 该 值 乘 以 一 个 非常 小 的 数 (这 里 使 用 的 是 0.005) 来 
降低 镜头 的 晃 动 强度 。 最 后 再 将 这 个 数值 乘 以 RandomValue 变 量 ， 这 个 变量 是 我 们 在 脚本 中 随机 生成 的 。 值 在 -1 到 1 之 间 来 回 
变化 ， 就 像 一 种 来 回 的 翻转 运动 。 

UV 准备 好 了 并 且 和 存储 天 renderTexUV 变 量 中 之 后 ， 我 们 就 可 以 使 用 tex2D () 遂 数 对 泻 染 纹 理 进行 采样 了 。 这 一 步 操作 完 
成 之 后 ， 残 得 到 了 最 终 的 泻 染 纹 理 ， 可 以 使 用 它 在 接 下 来 的 着 色 器 中 进行 进一步 的 处 理 。 


再 来 看 一 下 上 述 代 码 的 最 后 一 行 ， 我 们 简单 使 用 tex2D () 冰 数 对 晤 影 贴 图 进行 直接 及 样 。 不 需要 使 用 上 面 创建 的 UV 动 
画 ， 因 为 曙 影 贴图 是 绑 定 在 运动 镜头 上 的 ， 而 不 是 绑 定 在 内 姓 的 相机 胶片 上 。 


下 面 的 代码 片段 展示 的 是 frag () 函数 的 第 二 部 分 : 


//Process the Scratches UV and Pixels 


half2 scratchesUV = half2(i.uv.x + ( RandomValue * SinTime.Z * 
ScratchesXSpeed), 

liUV:yY + ( Time.XxX * ScratchesYSpeed) ) ; 
fixed4 scratchesTex = tex2D( ScratchesTex, scratchesUV).,; 


//Process the Dust UV and pixels 
half2 dustUV = half2(i.uv.x + ( RandomValue * ( SinTime.zZ * 
dustXSpeed)), 


l1.UV.Y + ( RandomValue * ( SinTime.z * dustYSpeed))); 
fixed4 dustTex = tex2D( DustTex, dustUV).; 


这 部 分 代码 几乎 与 前 面 的 代码 相似 ， 其 中 需要 生成 独特 的 UV 动画 值 来 改变 屏幕 特效 的 图 层 位 置 。 我 们 简单 使 用 内 置 的 
_9SinTime 值 得 到 -1 和 1 之 间 的 值 ， 再 乘 以 随机 值 ， 然 后 与 另 一 个 乘 数 相 乘 ， 从 而 修改 动画 的 整体 速 愿 。 一 旦 生成 了 这 些 UV 值 ， 
融 可 以 使 用 新 的 动画 值 对 灰 全 和 划 狠 纹理 进行 采样 了 。 


接 下 来 的 代码 主要 是 为 老 电影 屏幕 特效 创建 着 色 器 效果 的 。 


// get the luminosity values from the render texture using the YIO 
values. 
1xXed lum. = dot (fixed3(0.299, 0.587, 0.114), YenderTexr. .Tqgb); 


//AMAdd the constant color to the lum values 


fixed4 finalColor = lum 3 lerp{( SeplaColor, SepiaColor 十 
fxed4(0. 1f,.0.1f,D. EE,.1.0£), RandomValue):; 


使 用 这 几 行 代码 ， 束 可 以 为 整个 泻 染 纹理 创建 真实 的 着 色 效 果 了 。 为 了 实现 这 种 效果 ， 首 先 需 要 将 泻 染 纹 理 转 换 成 灰 度 版 本 
的 图 像 。 

为 了 达到 灰 度 的 效果 ， 可 以 使 用 YIQ 值 所 提供 的 亮度 值 (也 残 是 YIQ 中 的 Y 值 ) ，YIQ 值 是 北美 NTSC 电 视 系统 所 采用 的 一 种 
色彩 空间 。YIQ 的 每 个 字母 都 存储 了 一 个 颜色 剃 量 ， 用 于 电视 调整 出 可 读 性 的 颜色 。 

尽管 我 们 没有 必要 知道 这 种 色彩 空间 的 确切 由 来 ， 但 还 是 需要 知道 YIQ 中 的 Y 值 代表 的 是 图 像 的 亮度 值 。 这 样 ， 可 以 通过 得 
到 ) 泻 染 纹 理 的 每 个 像素 值 来 生成 该 泻 染 纹理 的 灰 度 值 ， 然 后 与 亮度 值 进行 点 积 计 算 。 这 残 是 这 个 代码 集 所 完成 的 功能 。 

一 旦 得 到 了 亮度 值 ， 束 可 以 简单 地 将 图 片 染 上 任何 想 要 的 颜色 了 。 这 个 颜色 是 通过 脚本 传递 给 着 色 器 的 ， 然 后 再 传递 到 
CGPROGRAM 代 码 块 中 ， 这 样 我 们 残 可 以 将 颜色 值 添 加 到 灰 度 泻 染 纹理 上 。 完 成 了 这 些 工 作 ， 我 们 融 得 到 了 一 个 完美 的 彩色 图 
像 。 


最 后 ， 为 屏幕 特效 的 每 个 图 层 创 建 一 种 混合 效果 。 代 码 如 下 : 


/ /Create a constant white color we can use to adjust opacity of 
effects 


fixed3 constantWhite = fixed3(1,1,1):; 


/ /Composite together the different layers to create finsl Screen 


Effect 
finalColor = lerp(lfinalColor, finalColor * vignetteTex, 
VignetteAmount).,， 


finalColor.rgb *= lerp(scratchesTex, constantWhite, ( RandomValue)); 


finalColor.rgb *= lerp(dustTex.rgb,; constantWhite; ( RandomValue * 
_SinTime.Zz) ) ; 
finalColor = lerp(renderTex, finalColor, EttectAmount) ; 


retuwurn, FnalColor 


最 后 一 组 代码 相对 比较 简单 ， 因 此 并 不 需要 太 多 的 解释 。 总 而 言 乙 ， 它 是 把 所 有 图 层 结合 到 了 一 起 实现 最 终 的 效果 。 残 像 将 
Photoshop 中 的 所 有 图 层 晋 加， 我 们 将 着 色 器 中 的 图 层 也 进行 了 乘法 运算 ， 每 一 个 图 层 都 要 经 过 lerp () 遂 数 进行 处 理 ， 以 便 可 
以 调整 每 个 图 层 的 不 透明 度 ， 从 而 使 美工 能 够 控制 最 后 的 画面 效果 。 我 们 提供 的 调节 因素 越 多 ， 实 现 的 屏幕 特效 也 束 越 完美 。 


9.2.4 参考 


更 多 关于 YIQ 值 的 内 容 ， 请 参考 下 面 的 网 址 : 


* http://en.wikipedia.oreg/wiki/ YIQ 


接 下 来 的 屏幕 特效 绝对 是 现在 十 分 流行 的 一 种 。 在 《使 命 召唤 : 现代 战争 》《 光 景 》 等 现在 十 分 流行 的 第 一 人 称 射击 游戏 中 
都 可 以 看 到 这 种 夜 视 风 格 的 屏幕 特效 。 它 使 用 了 一 种 非常 明显 的 石灰 绿色 入 日 整个 屏幕 。 


为 了 实现 这 种 酷 炫 的 夜 视 效 果 ， 可 以 在 Photoshop 中 对 特效 进行 一 些 分 解 。 在 网 上 找到 相关 的 图 片 ， 并 且 将 它们 按照 我 们 
想 要 的 方式 和 顺序 进行 混合 ， 组 成 一 个 分 层 的 图 片 ， 这 是 非常 简单 的 。 下 图 展示 的 丈 是 我 们 使 用 Photoshop 处 理 之 后 的 效果 
必 。 


| 
1 


| 


| 


i 
| 
| 


| 
| 


| | 
| 


| 目 
| 
| 
| 
[5 | 


| 
1 


和 


hh 
| 
| 


| 


B 


= 
一 
a 
rm 
iii” i 
mm 
本 = 一 篇 
于 = = 


由 
Ed 


gl 





下 面 把 Photoshop 组 合 之 后 的 图 片 进行 分 解 ， 以 便 我 们 能 更 好 地 理解 需要 准备 哪些 资源 。 下 一 证 我 们 会 详细 介绍 这 些 过 


我 们 重新 将 屏幕 特效 分 解 为 几 个 不 同 的 组 合 图 层 。 使 用 Photoshop 构 建 一 个 分 层 的 图 像 ， 以 便 我 们 能 够 更 好 地 了 解 如 何 获 
取 这 种 夜 视屏 幕 特效 的 信息 。 


- 绿色 着 色 : 屏幕 特效 的 第 一 个 图 层 是 使 用 石灰 绿 图 片 ， 几 乎 能 在 每 个 夜 视图 像 中 找到 这 种 效果 ， 它 也 是 夜 视 特效 的 标志 性 
效果 。 这 个 图 片 本 身 就 能 营造 一 些 夜 视 的 感觉 ， 如 下 图 所 示 : 





` 扫描 线 : 为 了 增加 玩家 的 视觉 感受 ， 我 们 引入 扫描 线 堆 盖 在 着 色 层 上 面 。 为 此 ， 使 用 Photoshop 创 建 一 张 图 片 ， 用 户 可 以 
对 图 片 进行 任意 的 裁剪 ， 以 调整 扫描 线 的 粗细 。 


- 噪声: 个 图 层 是 一 个 简单 的 噪声 贴图 ， 我 们 将 它 平 铺 在 图 片 层 和 扫描 线 层 之 上 ， 以 达到 分 割 图 像 并 为 特效 增加 一 些 细 
节 的 目的 。 这 个 图 层 要 表现 出 数字 屏幕 被 噪声 干扰 的 效果 。 





“党 影 : 夜 视 特效 的 最 后 一 个 图 层 是 尝 影 效果 。 如 果 你 看 过 《使 命 召唤 : 现代 战争 》 的 夜 视 特 效 ， 


影 来 模拟 一 种 俯视 的 光 深 训 
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先 为 屏幕 特效 准备 一 些 需 要 用 到 的 贴图 ， 按 下 面 的 步骤 进行 : 
1. 如 上 所 述 ， 准 备 一 张 景 影 贴图 、 一 张 扫 摘 线 贴图 和 一 张 噪声 贴图 。 
2. 创 建 一 个 脚本 ， 命 名 为 NightVisionEffect.cs， 再 创建 一 个 着 色 器 ， 命 名 为 NightVisionEffectShader.shader。 


3. 看 色 器 和 脚本 创建 完成 之 后 ， 为 屏幕 特效 添加 必要 的 代码 ， 然 后 运行 它们 。 对 于 这 些 步骤 是 如 何 完 成 的 ， 可 以 参考 第 8 章 
的 内 容 。 


最 后 ， 随 着 屏幕 特效 系统 的 建立 和 运行 ， 以 及 纹理 准备 就 绪 ， 可 以 开始 重 现 这 个 酷 炫 的 屏幕 特效 了 。 


9.3.2 “操作 步骤 


现在 ， 所 有 的 资源 文件 和 脚本 都 已 经 稳定 运行 ， 我 们 可 以 开始 添加 一 些 必 要 的 脚本 和 着 色 器 代码 了 。 首 先 编辑 
NightVisionEffect.cs 脚 本 中 的 代码 ， 双 击 这 个 文件 ， 在 MonoDevelop 中 打开 脚本 。 


.需要 在 脚本 中 新 建 一 些 变量 ， 使 用 户 能 够 在 Inspector 标 签 页 中 调节 这 些 参数 。 在 NightVisionEffect.cs 脚 本 文件 中 添加 下 
面 的 代码 : 


#region Variables 
public Shader nightVisionShader.,; 


SD Eloat wontrast, SS BC,.0FEs 
BODLG float brightness = 1. 0fs 


Public Color nightVisionColor =: Color. white:; 


public Texture2D vignetteTexture; 


public Texture2D scanLineTexture.,; 
public float scanLineTileAmount = 4.0f,; 


public Texture2D nightVisionNoise; 
100-Es 
L009Es 


public float noiseXSpeed 


public float noiseYSpeed 


Subliis fieoat distortion = Bb.2F. 
Public float scale = (0.8F.; 


private float randomValue = 0.0f.,; 
private Material curMaterial; 
#endregion 


2. 接 下 来 ， 需 要 完成 OnRenderlmage () 函数 ， 以 便 我 们 能 将 正确 的 数据 传 入 着 色 器 ， 这 样 着 色 器 才能 正确 地 处 理 这 个 屏 
幕 特效 系统 。 完 成 OnRenderlImage () 函数 的 代码 如 下 所 示 : 


void OnRenderImage (RenderTexture sourceTexture, RenderTexture 
destTexture) 


( 

if (nightVisionShader != null) 

{ 
material .SetFloat(" Contrast", contrast),; 
material.SetFloat(" Brightness", brightness); 
material.SetColor(" NightVisionColor", 

nightVisionColor),; 

material.SetFloat(" RandomValue", randomValue).; 
material.SetFloat(" distortion", distortion); 
material. SetFioat(” ‘Boale" SCale}} 


if (vignetteTexture) 


{ 


material .SetTexture(™ VignetteTex", 
VignetteTextLure) ; 


} 


if(scanLineTexture) 


{ 
material .SetTexture(™ ScanbLineTex", 
scanLineTexture).， 


material.SetFloat(" ScanLineTileAmount", 
scanLineTileAmount).; 


} 


if (nightVisionNoise) 


{ 
material.SetTexture(" NoiseTex", 
nightVisionNoise); 


material.SetFloat(" NoiseXSpeed", noiseXSpeed).; 
material.SetFloat (" NoliseYSpeed", noiseYSpeed).; 


Graphics.Blit (sourceTexture, destTexture, material); 


| 


else 


{ 
| 


Graphics.Blit (sourceTexture, GestIexture) :; 


3. 在 完成 NightVisionEffect.cs 脚 本 之 前 ， 还 要 确保 某 些 特定 值 的 取 值 学 围 是 在 合理 区 间 的 。 这 些 范 围 是 任意 的 ， 在 后 续 章 
证 进行 修改 也 无 妨 ， 使 用 限定 值 只 是 为 了 让 效果 更 好 。 


void Update() 
{ 
contrast = Mathf.Clamp (contrast, 0f,4f).; 
brightness = Mathf .Clamp (brightness, 0f, 2f).; 
randomValue = Random.Range(-1f,1f).; 
distortion = Matht .Clammp (ldistortion, =1f, 工 上 } ; 
Scale = Mathf.Clamp (scale, 0f, 3f); 


4. 现 在 我 们 再 来 看 屏幕 特效 系统 的 着 色 器 部 分 。 打 开 这 个 着 色 器 ， 然 后 在 Properties 块 中 输入 如 下 代码 : 


Properties 
{ 
MainTex ("Base (RGB)", 2D) = "white" {} 
VignetteTex ("Vignette Texture", 2D) = "white"{} 
ScanLineTex ("Scan Line Texture", 2D) = "white"{} 
NoiseTex ("Noise Texture", 2D) = "white"{} 
NoiseXSpeed ("Nolse X Spéed", Float) = 100.0 
‘NoiseYSpeed ("Nolse Y Speéed", Float) 100.0 
ScanLineTileAmount ("Scan Line Tile Amount", Float) = 4.0 
NightViS1i0neCoLlor ("Night VigS16n COLGE™, ‘ColOrF) = 
i 
Contrast ("Contrast",; Range(0j;4)) =.2 
Brightness ("Brightness", Range(0;2)) = 
RandomValue ("Random Value", Float) = 0 
ddIStortion ("DiStOrtioni™, Float) = 0-2 
Bcale ("Scale (Zo0m)™”; Float}) = 0,8 


5. 为 了 能 够 将 Properties 代 码 块 中 的 数据 正确 传 入 CGPROGRAM 代 码 块 ， 必 须 确保 CGPROGRAM 部 分 正确 声明 了 相应 的 变 
量 名 。 


CGPROGRAM 
#pragma vertex vert img 


#pragma fragment frag 
#pragma fragmentoption ARB precision hint fastest 
#include "UnityCG.cginc" 


uniform sampler2D MainTex; 
uniform sampler2D VignetteTex; 
uniform sampler2D ScanLineTex; 
uniform sampler2D NoiseTex; 
fixed4 NightVisionColor; 

fixed Contrast.; 

fixed ScanLineTileAmount,; 
fixed Brightness; 

fixed RandomValue; 

fixed NoiseXSpeed; 

fixed NoiseYSpeed; 

rixed distort1ion; 

Tixed scale; 


6. 屏 幕 特效 还 需要 包含 一 个 透镜 变形 的 效果 ， 以 进一步 表现 当 我 们 从 透镜 看 向 图 像 的 边缘 时 被 透镜 表面 曲率 扣 曲 的 效果 。 在 
CGPROGRAM 代 码 块 的 变量 声明 下 方 添加 下 面 这 个 冰 数 : 


float2 barrelDistortion(float2 coord) 
( 
// lens distortion algorithm 
// See http://www.ssontech.com/content/lensalg.htm 


float2 h coord. wy = Tloat2(0.5, 0.5}: 
大 
上 三 .0 FF LSBCOPECLGR * qrt (rt))s 


区区 


7. 现 在 ， 我 们 把 注意 力 转 移 到 NightVisionEffect 着 色 器 的 核心 部 分 。 首 移 需 要 得 到 泻 染 纹理 以 及 晶 影 贴图 。 在 着 色 器 的 
frag () 消 数 中 添加 如 下 代码 : 


fixed4 fragl(v2f img i) : COLOR 
{ 
//Get the colors from the RenderTexture and the uv's 
/ /Erom the v2f img struct 
half2 distortedUV = barrelDistortion(i.uv).; 
fixed4 renderTex = tex2D( MainTex, distortedUV).; 
fxed4 vignietteTex = tex2D( VignetteTex, 1.UV).; 


8. 接 下 来 ， 处 理 扫 摘 线 和 噪声 贴图 ， 赋 予 它们 合适 的 UV 动画 。 


/ /Process scan lines and noise 


half2 scanLinesUV = half2(i1.uv.x * ScanLineTileAmount, 
liUV-Y * ScanbLineTileAmount); 


fixed4 scanLineTex = tex2D( ScanLineTex, scanLinesUV).; 


half2 noiseUV = half2(i1uv.x + ( RandomValue * SinTime;2Zz 
* NoiseXSpeed), 
LauUvsy 4 【 Timesx * 
NoiseYSpeed) ) ; 
fixed4 noiseTex = tex2D( NoiseTex, noiseUV).; 


9. 为 了 完成 屏幕 特效 的 所 有 图 层 ， 还 需要 简单 地 处 理 一 下 泻 染 纹 理 的 亮度 值 ， 加 上 夜 视 的 头 色 得 到 标准 的 夜 视 显 示 效 果 。 


// get the luminosity values from the render texture using the YIQ 


ValLUes. 

fixed lum = dot (fixed3(0.299, 0.587, 0.114), renderTex. 
站 村 下 才学 

lum += Brightness; 

fixed4 finalColor = (lum *2) + NightVisionColor; 


10,. 最 后 ， 将 所 有 的 图 层 进 行 合并 ， 并 返回 最 终 的 夜 视 特效 的 颜色 值 。 


//Final output 
rinalColor = powlfinalColor, Contrast); 
finalColor *= vignetteTex:; 
finalColor *= scanLineTex * nolseTex,; 


return finalColor.; 


完成 上 述 所 有 代码 的 编写 之 后 ， 返 回 到 Unity 编 辑 器 中 ， 编 译 脚本 和 着 色 器 。 如 果 编 译 正 党 通过 的 话 ， 单 击 Unity 中 的 play 按 
钮 ， 查 看 运行 的 结果 ， 你 将 看 到 下 图 所 示 的 效果 。 





9.3.3 ”工作 原理 


夜 视 特效 其 实 和 老 电影 风格 特效 很 相似 ， 这 也 说明 了 我 们 的 这 些 组 件 是 模块 化 的 。 只 需要 通过 简单 地 交换 用 于 履 关 的 纹理 ， 
并 更 改 计算 出 的 平 铺 率 ， 束 能 在 基本 相同 的 代码 上 实现 完全 不 同 的 视 党 效果 。 


它们 唯一 的 区 别 是 夜 视 特效 引入 了 透镜 变形 的 效果 。 现 在 我 们 将 这 部 分 功能 进行 分 解 ， 以 便 更 好 地 理解 它 的 工作 原理 。 


下 面 的 代码 片段 是 用 于 处 理 透 镜 变 形 的 核心 代码 ， 这 段 代码 是 由 SynthEyes (一 款 专门 用 于 镜头 跟踪 的 软件 ) 的 设计 者 为 我 
们 提供 的 。 这 段 代码 是 完全 免费 的 ， 你 也 可 以 将 它 用 在 自己 的 特效 中 。 


float2 barrelDistortion (float2 coord) 


{ 


// lens distortion algorithm 

// See http://www.ssontech.com/content/lensalg.htm 
大 
££ 


fioat I = 0 + 天 和 w ( distortion * Sqre(E2)}); 


return £ * Secale * 卫士 0.53 


9.3.4 ”更 多 内 容 


在 电子 游戏 中 ， 一 般 没 有 高 亮 某 个 物体 的 需要 。 比 如 热 席 阳 板 应 该 给 人 和 其 他 热源 添加 一 个 后 期 特效 等 。 有 了 本 书 中 我 们 已 
经 介绍 过 的 知识 ， 想 要 做 到 这 一 点 并 不 困难 。 事 实 上 ， 你 可 以 通过 代码 修改 某 个 物体 的 着 色 器 或 者 材质 。 但 是 这 么 做 的 话 通常 工 
作 量 很 大 ， 而 且 需 要 在 很 多 物体 上 做 一 些 重 复 性 的 操作 。 


另外 一 种 更 加 高 效 的 办 法 是 使 用 替代 着 色 器 。 每 个 着 色 器 都 有 一 个 名 为 RenderType 的 标签 ， 到 现在 为 止 我 们 没有 介绍 如 何 
用 它 。 使 用 这 个 属性 可 以 强制 让 镜头 只 为 某 个 特殊 物体 使 用 某 个 特殊 的 看 色 器 。 你 可 以 通过 将 下 面 这 段 代 码 绑 定 到 镜头 上 来 实现 


这 个 功能 。 
Using UnityEngine; 
public class ReplacedShader : MonoBehaviour { 
public Shader shader:; 


vold Start (}) 1 


GetComponent<Camera>() .SetReplacementShader (shader, "Heat" ) ; 


| 


在 进入 运行 模式 之 后 ， 镜 头 会 但 询 所 有 需要 泻 染 的 对 象 。 如 果 它 们 没有 一 个 馈 RenderType= “Heat” 修 饰 过 的 看 色 器 ， 融 
“会 被 泻 染 。 着 色 器 的 对 象 只 有 拥有 这 种 标签 才 会 被 泻 染 出 来 。 


第 10 章 ”高 级 着 色 技术 


在 这 一 章 中 ， 你 会 学 到 如 下 内 容 : 


- 使 用 Unity 中 内 置 的 CgInclude 文 件 
` 使 用 CgInclude 对 着 色 器 进行 模块 化 


实现 毛皮 着 色 


蚁 


` 使 用 数组 实现 热度 图 


10.1 引言 


在 最 后 一 草 里 ， 讨 论 一 些 高 级 着 色拉 术 ， 在 你 的 游戏 开 友 过 程 中 也 许 会 用 到 这 些 高 级 扩 术 。 需 要 记 住 一 点 的 是 ， 你 在 游戏 中 
看 到 的 无 论 多 么 吸引 眼球 的 特效 都 是 将 着 色 器 技术 用 到 极致 后 所 得 到 的 。 本 书 会 教 你 一 些 创 建 和 修改 着 色 器 的 基本 技术 ， 但 是 你 
完全 可 以 按照 目 己 的 想法 加 以 试验 和 探索 。 一 个 最 好 的 游戏 并 不 一 定 是 最 接近 现实 的 ， 你 的 目的 不 应 该 是 让 游戏 世界 和 现实 世界 
尽 可 能 像 ， 这 永远 是 不 可 能 的 。 取 而 代 之 的 是 ， 应 该 将 着 色 器 视 为 一 个 工具 ， 通 过 这 个 工具 让 你 的 游戏 独一无二 。 有 了 最 后 一 章 
的 知识 之 后 ， 你 融 能 随心 所 欲 地 创建 你 想 要 的 材质 了 。 


10.2 ”使 用 Unity 中 内 置 的 Cglnclude 文 件 


在 编写 Cglnclude 文 件 之 前 ， 必 须 先 了 解 Unity 已 经 为 我 们 提供 了 哪些 Cglnclude 文 件 ， 正 是 这 些 隐藏 的 文件 才 让 我 们 的 着 
色 器 编写 过 程 变 得 高 效 。 你 可 以 在 Unity 安 装 目录 Editorl|DatalCGlncludes 中 的 Cglnclude 文 件 夹 中 找到 这 些 代 码 。 在 着 色 器 对 
物体 的 泻 染 过 程 中 它们 各 司 其 职 ， 有 一 些 是 用 来 处 理 阴 影 和 光照 的 ， 有 一 些 是 处 理 辅助 辫 数 的 ， 还 有 一 些 是 绾 理 平台 依赖 的 。 没 
有 这 些 文 件 ， 着 色 器 的 编写 势必 要 困难 很 多 。 


你 可 以 访问 Unity 提 供 的 链接 来 查看 更 多 信息 : 
http://docs.unity3d.com/Documentation/Components/SL-BuiltinIncludes.html 


为 了 能 够 让 你 逐渐 掌握 这 些 内 置 的 Cglnclude 文 件 ， 我 们 将 会 使 用 UnityCG.cginc 文 件 中 的 一 些 辅助 函数 。 


10.2.1 准备 工作 

在 进入 着 色 器 编写 的 核心 内 容 之 前 ， 我 们 需要 为 场景 准备 一 些 元 素 。 创 建 下 面 这 些 元 素 ， 然 后 企 MonoDevelop 中 打开 着 色 
器 : 

1. 创 建 一 个 新 场景 并 加 入 一 个 简单 的 球体 模型 。 

2. 创 建 一 个 着 色 器 和 材质 。 

3. 将 新 创建 的 痢 色 器 赋 给 材质 ， 然 后 将 材质 附加 到 球体 上 。 


4. 接 下 来 ， 创 建 一 个 平行 光 ， 然 后 将 它 放 在 球体 的 上 方 。 


5. 最 后 ， 打 开 位 于 Unity 安 装 目录 下 的 Cglnclude 文 件 夹 中 的 UnityCG.cginc 文 件 。 通 过 这 个 文件 我 们 可 以 分 析 一 些 辅助 孙 
效 ， 以 更 好 地 理解 使 用 这 些 函 数 会 友 生 什么 。 


6. 场 景 是 为 了 帮助 我 们 验证 着 色 器 在 正常 工作 的 ， 如 下 图 所 示 。 








准备 完 场 景 之 后 ， 就 可 以 开始 使 用 UnityCG.cginc 文 件 包含 的 一 些 辅助 函数 来 进行 试验 了 。 双 击 附 加 在 场景 上 的 着 色 器 ， 使 
用 MonoDevelop 打 开 它 ， 按 照 下面 的 步骤 为 着 色 器 添加 代码 。 


1. 在 着 色 器 的 Properties 代 码 块 中 添加 如 下 新 属性 ， 我 们 需要 一 个 贴图 和 一 个 用 于 控制 着 色 器 的 滑 块 。 


Properties 


MainTex ("Base (RGB)", 2D) = "white" {} 
DesatValue ("Desaturate", Range(0,1)) = 0.5 


| 


2. 然 后 需要 确保 Properties 部 分 和 CGPROGRAM 部 分 之 间 建 立 对 应 关系 ， 在 CGPROGRAM 声 明 及 #pragma 指 令 后 面 添加 
如 下 代码 : 


sampler2D _MalnTex; 
fixed _DesatValue:; 


3. 最 后 ， 通 过 添加 如 下 代码 来 更 新 Surf () 遂 数 。 我 们 将 会 用 到 一 个 从 未 见 过 的 立 数 ， 它 位 于 UnityCG.cginc 文 件 中 。 


void surf (Input IN, inout SurfaceOutput o) 


( 
halfad we = tex2D ( MaimnmTex, IV.uv: MainTex); 
Crgb = erp (ezgpy Luminancel(r.rgb); DesatValue).; 
oOo.Albedo = c.rgb; 
S.Alpha © Sa 
| 


着 色 器 代码 修改 完成 之 后 ， 你 会 看 到 如 下 图 所 示 的 结果 。 我 们 简单 地 使 用 一 个 Cginclude 文 件 中 的 辅助 立 数 ， 实 现 了 减少 主 
纹理 饱和 度 的 效果 。 


流明 但 =0.0 流明 值 =0.5 





通过 使 用 内 置 的 辅助 滔 数 Luminance () ， 我 们 就 能 快速 地 获得 减少 饱和 度 或 灰 度 值 变化 的 效果 。 实 现 这 种 效果 的 主要 原 
因 是 ， 一 旦 使 用 了 一 个 表面 着 色 器 ，UnityCG.cginc 文 件 将 会 自动 导入 着 色 器 中 。 


在 MonoDevelop 中 搜索 UnityCG.cginc 文 件 ， 你 会 在 第 276 行 上 友 现 这 个 国 数 的 声明 。 下 面 是 文件 中 的 代码 : 


inline fixed Luminance (fixed3 c) 


{ 
| 


Petiarn dot tbe: Fiwed3a ts Qu 7 G07T)}s 


这 个 函数 包 合 在 文件 中 ， 并 且 Unity 会 目 动 对 其 进行 编译 ， 我 们 可 以 在 目 己 的 代码 中 使 用 这 个 函数 ， 从 而 减少 重复 编写 的 代 
码 量 。 


Unity 中 还 有 另外 一 个 叫 作 Lighting.cginc 的 文件 。 这 个 文件 包含 了 所 有 我 们 使 用 的 光照 模型 ， 可 以 这 样 来 声明 它们 : 


#pragma Surface surf Lambert。 通 过 对 这 个 文件 进行 搜索 ， 可 以 上 现在 这 里 所 有 的 光照 模型 都 可 以 重用 和 模块 化 。 


10.3 ”使 用 Cglnclude 对 着 色 器 进行 模块 化 


了 解 内 置 的 Cginclude 文 件 是 非常 有 意义 的 ， 但 是 如 果 我 们 想 创建 Cglnclude 文 件 来 存储 光照 模型 和 辅助 消 数 又 会 怎样 呢 ? 
实际 上 我 们 可 以 创建 自己 的 Cglnclude 文 件 ,但 是 在 使 用 它们 高 效 地 开 友 泻 染 流 水 线 之 前 ， 应 该 学 习 一 些 代码 的 语法 知识 。 接 下 
来 ， 我 们 会 从 头 开始 学 习 Cglnclude 文 件 的 创建 过 程 。 


10.3.1 准备 工作 


继续 使 用 上 一 节 的 场景 、 着 色 器 和 材质 。 通 过 本 节 的 学 习 我 们 将 逐步 了 解 创建 新 的 Cglnclude 文 件 的 过 程 。 
1. 首 先 ， 新 建 一 个 txt 文 件 ， 将 其 命名 为 MyCglnclude.txt。 


2. 将 它 的 后 缀 名 更 改 为 .cginc。Windows 会 弹出 一 个 警告 框 襄 强 行 修改 扩展 名 时 该 文件 可 能 无 法 使 用 ， 不 用 理会 ， 它 是 能 够 
正音 使 用 的 。 


3. 将 这 个 新 的 .cginc 文 件 导 入 Unity 项 目 中 ， 编 译 它 。 如 果 一 切 正常 的 话 ，Unity 会 识别 它 并 且 将 其 编译 成 一 个 Cglnclude 文 
件 。 


接 下 来 我 们 开始 创建 和 目 定义 的 Cglnclude 人 代码， 双击 新 建 的 Cglnclude 文 件 ， 在 MonoDevelop 中 打开 它 。 


10.3.2 ”操作 步 
打开 Cglnclude 文 件 后 ， 就 可 以 在 里 面 输入 代码 并 将 它 应 用 到 表面 着 色 器 了 。 下 面 的 代码 将 为 Cglnclude 文 件 在 表面 着 色 器 
中 使 用 做 好 准备 ， 并 且 人 允许 我 们 在 需要 开发 更 多 的 着 色 器 时 添加 更 多 的 代码 。 


1. 从 预 处 理 命令 开始 Cglnclude 文 件 的 编写 ， 这 个 语句 有 点 类 似 于 #pragma 和 #include。 在 这 里 ， 需 要 定义 一 些 新 的 代码 
集 ， 这 样 ， 当 我 们 将 着 色 器 包含 在 编译 器 指令 中 时 ， 这 个 代码 集束 会 进行 编译 。 在 Cglnclude 文 件 的 最 上 方 添加 如 下 代码 : 


#ifndef MY CG INCLUDE 
#define MY CG INCLUDE 


2. 然 后 按照 惯例 ， 需 要 确保 #ifndef 或 者 #ifdef 有 对 应 的 #endif 来 封闭 。 就 像 C# 中 的 if 语 句 需要 用 两 个 括号 括 起 来 一 样 。 在 
#define 指 令 后 面 添 加 如 下 代码 : 


#endif 


3. 接 下 来 ， 需 要 为 Cglnclude 文 件 添 加 核心 内 容 ， 通 过 输入 下 面 的 代码 完成 对 Cglnclude 文 件 的 编写 。 


fixed4 MyColor; 


inline fixed4 LightingHalfLamber (SurfaceOutput s, fixed3 
lightDir, fixed atten) 


{ 


fwed diff Ss max(d,. ot(s. NormlL, LghtDLry) |} 


df .= (LE 4 5}.53 

fixed c: 

Grgb = S.Albedo * LightColor0O.rgb * ((diff * MyCOlGr.rgb) * 
atten).; 


= lphas 
PetCnuary Ge 


| 


#endif 


4. 所 有 的 代码 完成 之 后 ， 你 残 有 了 目 己 的 第 一 个 Cglinclude 文 件 。 只 需要 这 人 么 一 点 点 代 码 ， 束 可 以 大 大 降低 重复 的 代码 量 。 
而 且 可 以 一 直 存 储 这 些 我 们 使 用 的 光照 模型 ， 永 远 不 会 失去 它们 。 你 的 Cglinclude 文 件 应 该 看 起 来 如 下 所 示 : 


#ifndef MY CG INCLUDE 
#define MY CG INCLUDE 


fixed4 MyColor.; 


inline fixed4 LightingHalfLamber (SurfaceOutput s, fixed3 
l]ightDir, fixed atten,) 


{ 


fiXed diff 二 Wax(Q, Hot (BNormal, L1G9htDir))s 
diff = (difEf 二 和 5 二 .5 


fixed c; 


GEgD = S.Albede * LightColorD. ge * tC(ldiff 本 MyColor.rgay) < 
atten). 


di ALDpDas 
return GC; 


| 


#endif 


在 完整 地 使 用 Cglnclude 文 件 之 前 ， 还 有 几 个 步 又 需要 完成 。 我 们 只 需要 简单 地 告诉 当前 着 色 器 我 们 正在 使 用 这 个 文件 和 它 
的 代码 即 可 。 i mi 需要 完成 下 面 几 个 步骤 : 


1. 我 们 将 注意 力 放 到 着 色 器 中 ， 需 要 告诉 CGPROGRAM 部 分 将 Cglnclude 文 件 包含 进去 ， 这 样 我 们 才能 访问 Cglnclude 文 件 
内 部 的 代码 。 按 照 如 下 方式 修改 CGPROGRAM 部 分 的 代码 : 


CGPROGRAM 
#include "MyCGInclude .cginc" 
#pragma surface surf Lambert 


2. 目 前 着 色 器 使 用 的 是 内 置 的 Lambert 光 照 模 型 ， 但 是 我 们 想 使 用 的 是 我 们 在 Cglnclude 文 件 中 创建 的 半 表 伯 光 照 模 型 。 因 
此 将 Cglnclude 文 件 的 代码 包谷 进来， 添加 如 下 代码 丈 可 以 使 用 半 朗 伯 光 照 模 型 了 。 


CGPROGRAM 


#include "MyCGInclude.cginc" 
#pragma surface surf HalfLambert 


3. 最 后 ， 还 需要 在 Cglnclude 文 件 中 声明 一 个 自 定义 变量 


， 以 表示 我 们 可 以 为 看 色 器 的 用 户 提供 一 些 默认 变量 
是 如 何 工作 的 ， 在 着 色 器 的 Properties 块 中 输入 如 下 代码 : 


人 A、 一 一 


。 为 了 了 解 已 


Properties 


{ 


MainTex ("Base (RGB)", 2D) = "white" {} 
DesatValue ("Desaturate",;, Ranige(0j;1)) 三 0.5 
Myeeler (“My CeolGE"s ‘Color}) = (lislils1) 


4. 当 我 们 返回 Unity 时 ,看 色 器 的 Cginclude 文 件 会 进行 编译 ， 如 果 编 译 正常 的 话 ， 你 会 友 现 实际 上 我 们 使 用 了 新 的 半 朗 伯 
光照 模型 以 及 一 个 新 的 颜色 样本 (在 Unity 的 Inspector 标 签 页 中 可 以 看 到 ) 。 下 图 展示 了 使 用 我 们 的 Cglnclude 文 件 之 后 的 效果 
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使 用 着 色 器 时 ， 可 以 使 用 #include 预 编译 指令 来 插入 其 他 的 代码 集 ， 这 样 束 告诉 了 Unity 我 们 想 让 当前 着 色 器 使 用 包含 的 这 
部 分 代码 ， 这 也 是 这 个 文件 被 称 作 Cglnclude 文 件 的 原因 。 我 们 使 用 #include 指 令 来 包 售 Cg 代 码 片 段 。 


一 旦 声明 了 #include 指 令 ，Unity 束 会 在 项 目 中 查找 这 个 文件 ， 并 找到 已 经 定义 好 的 代码 片段 。 这 束 是 我 们 开始 使 用 #ifndef 
和 #endif 的 地 方 。 当 声明 #ifndef 时 ， 表 达 的 意思 是 在 没有 定义 时 融会 定义 某 个 类 型 。 因 此 在 本 例 中 ， 如 果 Unity 没 有 找到 一 个 名 
为 MY_CG_INCLUDE 的 代码 片段 ， 束 会 在 Cglnclude 文 件 的 编译 过 程 中 创建 这 个 定义 ， 从 而 使 我 们 能 够 访问 下 面 的 代码 。 


#endif 会 简单 地 告诉 我 们 这 是 定义 的 结束 位 置 ， 我 们 也 残 停止 查找 更 多 的 代码 。 


你 可 以 看 到 这 种 方法 是 多 么 强大 一 可 以 把 所 有 冲 用 的 光照 模型 和 辅助 阔 数 都 仓储 在 一 个 文件 中 ， 以 极 大 地 减少 我 们 需要 编 
写 的 代码 量 。 当 你 的 着 色 器 需要 灵活 地 设置 多 种 状态 国 数 时 ， 会 真正 体现 它 的 强大 之 处 。 





材质 的 外 观 是 取决 于 其 物理 结构 的 。 着 色 器 只 是 试图 模拟 出 这 种 外 观 ， 但 是 一 般 时 候 着 色 器 对 于 光线 的 处 理 过 于 简单 。 有 一 
些 非常 复杂 的 材质 包含 大 量 视 党 可 见 的 细节 信息 ， 着 色 器 在 泻 染 这 些 材 质 的 时 候 举 步 维 艰 。 上 典型 的 材质 有 纺织 纤维 、 动 物 毛皮 
等 。 这 一 节 我 们 会 教 给 你 如 何 才 能 泻 染 出 这 种 复杂 的 毛皮 或 者 其 他 类 似 的 非 平 面 材质 (比如 草 ) 。 为 了 实现 这 个 效果 ， 需 要 对 同 
一 个 材质 进行 反复 多 次 摘 绘 ， 每 次 增加 其 尺寸 ， 以 此 来 达到 一 种 类 似 毛 皮 的 视 完 效 果 。 


下 图 是 基于 Jonathan Czeck 和 Aras Pranckevicius 的 工作 做 出 来 的 着 色 器 示例 : 





在 这 一 节 里 ， 需 要 两 样 和 东西 。 第 一 个 是 毛皮 纹理 ， 第 二 个 纹理 是 用 来 控制 毛皮 分 布 的， 与 第 一 个 息 息 相 天 。 下 图 是 我 们 接 下 
来 作为 例子 的 豹 纹 纹理 (左边 ) 和 对 应 的 控制 遮 淖 纹理 (右边 ) 。 


SE SF 





控制 庶 尝 纹理 中 的 日 色 像 素 部 分 会 将 原始 纹理 材质 的 对 应 部 分 挤 压 出 来 ， 用 来 模拟 毛皮 上 的 毛 。 为 了 更 好 地 拟 实 ， 这 个 遮 单 


中 的 白色 像素 点 需要 离散 的 ， 这 样 才能 做 出 一 缕 一 缕 毛 发 的 效果 。 创 建 这 个 纹理 的 步骤 如 下 : 
1. 给 原始 纹理 设置 一 个 国 值 ， 以 过 滤 出 毛 惨 比较 稀 蚊 的 部 分 用 来 做 缕 。 
2. 使 用 一 个 噪声 过 滤器 来 像素 化 图 片 。 噪 声 的 RGB 通道 应 该 是 相互 独立 的 ， 目 的 是 做 出 一 个 黑白 效果 。 
3. 为 了 进一步 增加 拟 实 感 ， 再 覆盖 一 个 Perlin 噪 声 过 滤器 来 给 毛皮 添加 一 些 随机 变化 。 
4. 最 后 ， 再 次 使 用 国 值 过 滤器 来 进一步 分 离 纹 理 中 的 像素 。 


与 所 有 其 他 的 着 色 器 一 样 ， 需 要 创建 一 个 新 的 标准 看 色 器 和 材质 ， 并 且 将 它们 联系 起 来 。 


10.4.2 ”操作 步 又 


我 们 现在 可 以 开始 修改 最 开始 创建 的 标准 着 色 器 了 。 
1. 给 Properties 添 加 属性 : 


FurLength ("Fur Length", Range (.0002, 1)) = .25 
CutortE (vALpha: cutorr", Reange(D, 1}}) SE QQ.5 
CutoffEnd ("Alpha cutoff end", Range(0;1) 
. EdgeFade ("Edge Fade";, Range (0;1)) = 0.4 
Gravity ("Gravity’ direoetion”, Vector) 三 {0,0,1.,0) 
GravityStrernigth ("G strenght", Range(0y1)) = 0.25 


】 = 器 = 


2. 这 个 着 色 器 需要 你 将 同样 的 纹理 重复 多 次 ， 使 用 10.3 节 模块 化 着 色 器 中 的 一 些 技术 来 将 所 有 需要 的 代码 进行 分 类 ， 然 后 放 
到 一 个 外 部 文件 中 。 接 下 来 创建 一 个 新 的 Cglnclude 文 件 ， 命 名 为 FurPass.cginc， 代 码 如 下 : 


#pragma target 3.0 


fixed4 Color; 
sampler2D MainTex,; 
half Glossiness; 
half Metallic; 


uniform float FurLength; 
uniform float Cutoff; 
uniform float CutoffEnd; 
uniform float EdgeFade,; 


uniform fixed3 Gravity; 
uniform fixed GravitySstrength; 


void vert (inout appdata full vv) 


{ 


fixed3 direction = lerpl(lv.normal, Gravity * GravitySstrength 
+ Vv.normal * (1- GravityStrength), FUR MULTIPLIER) ; 


V.vertex.xyz += directijion * FurLength * FUR MULTIPLIER * 
VCoOLors as 


} 


struct Input { 
float2 uv MainTex,; 
float3 viewDir; 


}; 


void surf (Input IN, inout SurfaceOutputstandard o) { 
fixed4 C = tex2D ( MainTex, IN.uv MainTex) * Color; 
O.Albedo = Cc.rgb; 
oO.Metallic = Metailitic; 
oO.Smoothness = Glossiness; 


//G.ALlpha = step( Cutoff, .a); 
O.Alpha = step(lerp( Cutoff, CutoffEnd,FUR MULTIPLIER), c.a); 


float alpha = 1 - (EUR MULTIPLIER * FUR MULTIPLIER).; 
alpha += dot (IN.viewDir, oOo.Normal) - EdgeFade,; 


Oo.Alpha *= alpha; 


3. 回 到 最 开始 的 着 色 器 ， 然 后 添加 下 面 这 部 分 代码 到 ENDCG 部 分 之 后 : 


CGPROGRAM 


#pragma surface surf Standard fullforwardshadows alpha:blend 
vertex:vert 


#define FUR MULTIPLIER 0.05 
#include "FurPass.cginc" 
ENDCG 


4. 因 为 需要 反复 演 染 几 次 纹理 ， 所 以 我 们 需要 渐进 地 增加 FUR MULTIPLIER， 分 20 次 从 0.05 渐 进 到 0.95 是 个 不 错 的 选择 。 


将 着 色 器 编译 并 且 指 定 给 材质 之 后 ， 可 以 通过 在 Inspector 标 签 页 中 修改 属性 来 调整 其 外 观 。Fur Length 属 性 决定 了 毛皮 壳 
层 之 间 的 距离 ， 可 以 用 来 修改 毛皮 的 长 度 。 毛 应 太 长 时 ， 需 要 更 多 的 苹 加 层 才能 让 效果 看 起 来 真实 。 和 Ce 
Cutoff End 是 用 来 控制 毛皮 的 密度 以 及 毛发 是 如 何 渐进 变 细 的 。Edge Fade 则 决定 了 毛皮 最 后 的 透明 度 ， 这 个 透明 度 可 以 
莒 造 一 种 选 松 柔软 的 感 劳 。 材 质 越 柔软 ，Edge Fade 束 应 该 越 高 。 最 后 ，Gravity Direction 和 Gravity SS 
这 曲 处 理 以 模拟 重力 作用 。 


10.4.3 ”工作 原理 


这 一 证 里 用 到 的 拉 术 又 称 为 Lengyel 的 同 轴 毛 皮 壳 层 技 术 ， 或 者 简称 为 这 层 技 术 。 它 的 实现 原理 是 一 层 一 层 地 泻 染 逐 渐变 大 
的 几何 体 拷贝 。 在 正确 的 透明 度 下 ， 可 以 做 出 连续 的 头 友 丝 效果 。 





真实 表皮 : 立体 几何 完 层 表皮 : 离散 球体 


壳 层 技术 非常 有 用 ， 而 且 实 现 起 来 也 不 难 。 某 些 非 常 拟 实 的 毛皮 效果 不 仅 需 要 挤 压 模型 的 几何 结构 ， 还 需要 调整 其 硕 点 。 对 
于 密集 型 的 着 色 器 而 言 这 是 可 行 的 ， 但 是 本 书 暂 时 不 讨论 这 种 着 色 器 。 
这 个 毛皮 着 色 器 的 每 一 个 壳 层 都 包含 在 FurPass.cginc 中 。 顶 挟 销 数 创 建 了 一 个 稍微 大 一 点 版 本 的 模型 ,创建 的 方式 是 法 同 
挤 压 。 此 外 ， 我 们 这 里 还 考虑 了 重力 效果 来 保证 在 越 远离 中 心 点 的 地 方 重力 作用 越 强 烈 。 
void vert (inout appdata full v) 
{ 
上 BGS direcotion = Erp(vV normml, Gravity * GravityStrength = 


Vv.normal * (1- GravityStrength), FUR MULTIPLIER).,; 
V.Vertex.xyz += direction * FurLength * FUR MULTIPLIER * 


Vi. OQLOr:.a。 


| 
在 这 个 例子 里 ，alpha 通 道 被 用 来 决定 最 后 的 毛皮 长 度 ， 可 以 进一步 微调 以 求 精准 。 


最 后 ， 表 面 肖 数 会 从 alpha 通 道 读 取 控制 让 党 纹理 。 使 用 截断 值 来 决定 哪些 像素 需要 显示 ， 哪 些 则 不 需要 显示 。 为 了 匹配 上 
Alpha Cutoff 和 Alpha Cutoff End， 这 个 值 在 每 个 壳 层 都 是 不 一 样 的 。 


SG.Alpha = SteB (lerp( Cutoff;: CutoffEnd, FUR MULTIPLIER); €.-a); 


float alpha = 1 = (FUR MULTIPLIER * FUR MULTIPLIER).; 
alpha += dot (IN.viewDir, o.Normal) - EdgeFade; 


oOo.Alpha *= alpha; 


毛皮 最 后 的 alpha 值 也 是 取决 于 其 相对 于 镜头 的 角度 的 ， 这 样 可 以 让 其 看 起 来 更 加 柔软 。 


10.4.4 更 多 内 容 
毛皮 着 色 器 可 以 用 来 模拟 动物 毛皮 。 但 是 它 同样 可 以 用 在 很 多 其 他 材质 上 。 它 很 适合 用 在 那些 天 然 由 多 层 结构 组 成 的 材质 
上 ， 比 如 树冠 、 迷 雾 、 人 类 头发 或 者 草 等 。 


在 毛皮 着 色 器 中 还 有 很 多 可 以 改进 的 地 方 ， 可 以 加 一 点 风 吹 效 果 的 动画 进去 ， 比 如 通过 修改 实时 重力 的 方向 来 达到 这 个 效果 
。 如 果 校 准 得 当 的 话 ， 毛 皮 束 可 以 做 成 看 起 来 像 是 被 风 吹 过 的 样子 。 


秩 


此 外 ， 还 可 以 让 毛色 随 着 角色 的 移动 产生 一 毕 运动 感 。 所 有 这 些 看 似 微小 的 优化 都 可 以 让 毛皮 看 起 来 更 加 真实 ， 因 为 它们 并 
不 一 定 只 是 一 些 附 寿 在 表面 的 静态 材料 。 不 乎 的 一 点 是 : 这 个 着色 器 是 有 代价 的 ， 因 为 有 20 层 ， 所 以 计算 起 来 很 费时 间 。 裔 层 
的 数量 直接 决定 了 材质 的 拟 实 程度 。 对 于 这 个 层 数 和 毛皮 厚度 ， 可 能 需要 反复 调试 校准 以 便 它 能 真正 地 为 你 所 用 。 考 虑 到 这 里 可 
能 引起 的 性 能 问题 ， 建 议 具 体 情况 具体 分 析 ， 某 些 材 质 可 能 需要 更 多 一 些 的 壳 层 ， 某 些 可 以 少 用 一 点 。 


10.5 ”使 用 数组 实现 热度 图 


着 色 器 星 深 难民 的 一 个 重要 特点 是 缺少 合适 的 文档 。 大 部 分 开 友 人 员 都 是 通过 一 大 堆 代 码 来 开始 学 习 着 色 器 的 ， 但 是 对 于 着 
色 器 背后 的 工作 原理 往往 缺少 深入 的 认识 。 而 且 由 于 Cg/HLSL 做 了 大 量 的 假设 ， 某 些 假设 甚至 有 点 不 可 思议 ， 这 时 开发 人 员 就 
越 友 难以 理解 了 。Unity3D 使 用 C# 脚 本 的 SetFloat、Setint、SetVector 等 方法 来 与 着 色 器 进行 互通 。 不 幸 的 是 ，Unity3D 并 没 
有 一 个 与 数组 相对 应 的 SetArray 广 法， 基于 此 很 多 开发 人 员 形 成 了 一 种 认识 : Cg/HLSL 根 本 束 不 支持 数组 。 这 个 认识 是 不 对 
的 ， 在 这 一 节 里 ， 我 们 会 向 你 展示 如 何 给 着 色 器 传递 一 个 数组 。 只 需要 记 住 GPU 进 行 了 很 多 并 行 计算 方面 的 优化 ， 而 一 旦 我 们 
在 着 色 器 中 使 用 了 太 多 的 循环 ， 游 戏 的 性 能 往往 会 急剧 下 降 。 


这 一 节 里 ， 我 们 会 实现 一 个 热度 图 ， 如 下 所 示 : 


Lo 


10.5.1 准备 工作 


这 一 节 里 的 特效 是 从 一 系列 点 上 创建 出 一 个 热度 图 。 热 度 图 可 以 硬 加 在 任何 图 片上 ， 就 像 上 面 的 示例 图 片 那样 。 在 开始 之 前 
需要 准备 下 面 几 步 : 


1. 使 用 一 个 你 想 用 来 做 热度 图 的 纹理 创建 一 个 四 边 形 ， 在 这 个 例子 里 ,我 们 使 用 的 是 一 个 伦敦 的 地 图 。 
2. 创 建 男 外 一 个 四 边 形 ， 将 其 放 在 第 一 个 四 边 形 上 面 。 热 度 图 会 出 现在 第 二 个 四 边 形 里 面 。 


3. 给 第 二 个 四 边 形 绑 定 一 个 新 材质 和 对 应 的 新 着 色 器 。 


10.5.2 ”操作 步 又 


这 个 着 色 器 与 之 前 创建 的 那些 有 很 大 不 同 ， 虽 然 它 相对 而 言 还 算 比 较 人 简短 。 正 因为 如 此 ， 我 们 把 它 相关 的 代码 一 次 性 贴 到 这 
里 。 


1. 将 下 面 的 代码 拷贝 到 新 建 的 着 色 器 中 : 


shader " Heatmap™ | 
Properties | 
HeatTex ("Texture", 2D) = "white"™ 1{} 
} 
subshader | 
Tags Il"Queue"="Transparent") 
Blend Srcalpha CneMinussrchlpha // Alpha blend 


Pass | 
CGPROGRAM 
#pragma vertex vert 
#pracma fraogment frag 


astruct vertInput 1 
float4 pos : POSITION: 

}; 

atruct vertOutput { 
float4 pos : POSITION:; 
fixed3 worldPos : TEXCOORDT: 


}; 


vertOutput vert(vertInput input) 1 
Vertoutput oOo; 
OO.PpPOS = mul (UNITY MATRIX MVP, input .pos):; 
oO.WworldPos = mll( Object2World, input .pos) .XYyZ; 
return oO; 
} 
unitorm int Points Length = 0; 
unitorm float3 Points [20]; 
ji (x Y; 2) = position 
uniftorm float2 Properties [20] ; 
/:/ XxX = radius, Y = intensity 


sampler2D HeatTex; 
halfa4 frag(vertOQutput output) : COLOR | 


/i Loops over all the points 
half h =: 0; 


for {int 1 = 0; i < Points Length; 1 十 十 ] 
/:/: Calculates 七 he contribution of each point 
halt di = distance (loutput .worldPos, 


Points [i] .xyz):; 


下 
全 
卢 : 
Hh 
Fa 
-= 
| 


Properties[i] .x; 
1 - saturate(di / ril: 


EH 
所 
户 ; 
Hh 
= 
卢 
| 


h += hi * properties [i] .y; 


} 


/:/ Converts (0-1) according to the heat texture 
h = saturatei{(h}: 

half4 color = tex2D{(! HeatTex, tixed2(h, 0.5)); 
return color: 


| 


ENDCG 
] 
| 


rallback "Ditfuse" 


2. 一 旦 你 将 这 个 脚本 所 定 给 了 新 创建 的 材质 ， 融 应 该 相应 地 给 热度 图 提供 一 个 梯度 纹理 。 这 里 要 注意 一 点 ， 需 要 将 其 Wrap 
Mode 设 置 为 Clamp。 我 们 的 例子 里 用 的 是 下 面 这 个 梯度 纹理 : 





Oa 如 果 热 度 图 用 来 作为 覆盖 层 的 话 ， 需 要 确保 梯度 纹理 有 一 个 alpha 通 道 ， 并 且 纹 理 在 寻 入 时 带 了 Alphais 


Transparency 选 项 。 
3. 创 建 一 个 新 脚本 ， 命 名 为 Heatmaps， 代 码 如 下 : 


using UnityEngine; 
using System.Collections; 


public class Heatmap : MonoBehaviour { 


public Vector3|[] positions,; 
public floatl[] radiuses ; 
public floatl[] intensities,; 


public material material.; 


velid Start 


{ 


material.SetInt(" Points Length", positions.Length); 


for (1nit 1 二 0 1 < SatLOnE DeEDGtER 1 #4+) 


material. SetVector(” Ponts™ + 1:TOString().; 
positions [i]); 


Vector2 properties = new Vector2 (radiuses|i], 
intensities |1]); 


material.SetVector("” Properties" + i.ToString(), 
properties).; 


} 
} 
} 


4. 将 脚本 绑 定 到 场景 中 的 某 个 物体 上 ， 最 好 是 放 在 前 面 创建 的 第 二 个 四 边 形 上 ， 然 后 将 材质 拖 岛 到 脚本 中 的 material 栏 。 
么 做 了 之 后 ， 脚 本 束 可 以 访问 到 材质 并 且 对 其 进行 初始 化 了 。 


xf 


5. 最 后 ， 展 开 脚本 中 的 位 置 、 半 径 和 强度 字段 ， 然 后 使 用 热度 图 的 值 来 对 其 子 属性 进行 相应 的 填充 。 位 置 表示 的 是 世界 坐标 
中 热度 点 的 位 置 ， 半 径 表 示 的 是 它们 的 尺寸 ， 强 度 则 表示 了 它们 对 周围 的 影响 有 多 强 ， 如 下 图 所 示 : 


CG ET 
Script 蜀 Heatrmap 
Positions 


|zZe 


Element 0 


司 [iT 
Element 2 


Radiluses 


S Heatrmap 








这 个 着 色 器 所 依赖 的 东西 在 本 书 前 面 没 有 涉及 过 。 第 一 个 是 数组 ，Cg 可 以 按照 下 面 语法 创建 数组 : 
uniform float3 Points [20] :; 


Cg 并 不 支持 不 定 长 数组 ， 必 须 在 使 用 的 时 候 就 决定 好 数组 的 长 度 。 这 里 我 们 创建 的 是 一 个 长 度 为 20、 包 含 20 个 元 素 的 数 
组 。 

Unity 并 没有 提供 任何 方法 来 直接 对 该 数组 进行 初始 化 。 但 是 ， 数 组 中 的 单个 元 素 却 是 可 以 通过 数组 名 (_Points) 和 位 置 索 
引 访 问 得 到 的 。 比 如 _Points0 或 者 Points10 等 。 这 种 方式 目前 只 对 确定 类 型 的 数组 有 效 ， 比 如 float3 或 者 float2。 绑 定 到 四 边 形 
的 脚本 逐个 元 素 初 始 化 着 色 器 的 数组 。 

在 着 色 器 的 雁 片 函数 中 ， 有 一 个 类 似 的 for 循 环 ， 对 材质 的 每 一 个 像素 ， 这 个 循环 查询 了 所 有 的 点 来 找到 它们 对 于 热度 图 的 
贡献 程度 。 


hal hk ds 
for (int 1 = 07 1 < Points Lengths 1 ++) 


人 


// Calculates the contribution of each point 


half di = distance (output .worldPos, Pointsl1i] .xy2z):; 


half ri = Propertiesli] .x; 
half hi = 1 - saturate(di / ri). 


h +=- hi * Propertiesl1i] Yy; 


在 提供 了 半径 和 强度 之 后 ， 这 里 的 h 变 量 存 储 的 是 所 有 扣 的 热度 值 。 然 后 这 个 热度 值 会 被 用 来 查找 应 该 使 用 梯度 纹理 中 的 哪 
种 颜色 。 

这 个 着 色 器 和 数组 相 得 益 彩 ， 甚 至 有 少数 游戏 是 以 此 作为 核心 潜力 的 。 然 而 ， 数 组 这 种 方式 的 主要 瓶颈 在 性 能 上 ， 因 为 在 每 
一 个 像素 上 ， 它 都 需要 遍历 所 有 点。 


